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ujM cs-Sj Cm 


j Ail^j^al j All ^^Jc. J .Wa-a lilli ^^Jc. ^LLuJI j aLLLall j t ^J^jll (jji^>ll jlll ^ajaiJ 


: ^xj 


|»J.}£l ^g_all j)-a ^Jj^al cilia. ( JaJjoU ^gj^U (j£ jujj A-a^lat-all jsJ-lSJ ^Jc. 'j-"-^"' 9 - 0 ^>J;JI W©b Jl -Ix-l ^al 


(jx -lai tLLtS lillJS jA LaJj (Jj c^-aLlc-VI ^1 (jjSLl La t-Jjijl t_Jjiuil j (JSjuaj (_£jll^-all 

^.lii V La — Ig-La o -li--a.il ^jjlj^JI ^^g-ic-l J~ ^jjll Web -11 ^aljji ^ -laJ (jl — j.J_JI 

(jji Lai (4_l^.li (_j-a IJa j f.jjLa!l (_g.llISl!l (JS-aall ^Jl A9Ljal a j gj-ajai-a JSalil CllLa^Ix-all 

^Ic. Web 2*0 JL i— i ajxj Lai ^ilailll e-^ ^ Aiili Web Jl jjlaii .iss i_ £j^.LM aj^.LJI 

dul£ ^ill Aj^-a^JI CllliJll J dllj^VI jJ_jlaj] A^.LJI j^gJa ^1 A^JjjlL ,_£.}l La IJa j cY » » 1 
a-LLaxJI CllLUalLa (jjfljaj (jC. ajj-^ali Cllsa-U^al ^Jll J Web Jl ^Jlj^ ^.-aai^aa j (_gjjJxa (_gAl j)JJ 


^J-l£l j IAjJjJoIii A. ill ill ^al A-ag.l ^j-a ^»ls La (jlfcjjoi ^Jll J Ajj— - iC- t_Llj ^Jlj-a lilLLi-aL yJiaj-aJall 

^ ^-L-JI (jjLail ^jJxj ^laLJI" (jL? lillJ c^jjII Web £-a LalaL j!i£l j cgjsl l^-i-a o-ii-ia. ^-)L)I 


."Web Jl flic 


^jVI ojJa^JI y|^-ux.i ylLill CSS j HTML t _ s J*J (j^ (_JSJ jli-^al di ^.1 l_Aj£JI La tjJalii 
Aj.iJa.iII HTML JLL^. ^j-a lillJl -ii^-aJll .ijtj HTML 5 a*J ^»jii J] VVeb jjJLa 
J LLLaS-a Lajal t_llj£ll La ^-llil LaS cL-lajI jia^gll (jx XHTML jJjLt-a -L (j-a j jl-L-rall (jji 
t_j\j£J| La (jli |js^-l j i Ljjjl jaa^all (j-a Aj-lilaJI CSS ^_}^U JLLi. ^j-a lilljJ -\lg-alJl iiJ CSS 3 

J ^j.i,L^a3 qm i__fllljj 


Ajj-alll A^-a_)jII AxJ ^jji ^"t^-sVl ^jjaaliJI ^jl-lj-aVI (_Jj-^aall IJa ^jialli :HTML 5 — ^ 

4jIjS ^gJc. (jj£j (jl Ajjlal (j-ajJaJ j ^J.lLa j (_Jj-aa-a JSjJal HTML AjJXjauIl 

.2jI (jJL sAlJJ |_sJII J£alIL J Aj&jj (_5JII (_5jla-alll t_llj dlLaJj-^a 
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y-a j) dlHall I Ig-a-lA.) ^^lll Ljl^all (_l<sl£ Jj-asll ILa (jLslil :0SS3 — Y 

Ipli (jj^J (jl Ajjla .Ixj j c^j^i-a j JslIjuU (JSjuoJ CSS AijLijaijVI JaLajLM jjljjl 

. <_JjVI lgAjtj£ <sLu (^gjll t—Ujll dllajj^a ^3 <Ca-13 (_gjja*all (JxaaJ 

(jl i— la-j (jl£ Client Side (JaasJI <— Sjla jyi L-JJ^ll <^-a_)jll (jc. Clll-lail C-aliSj — V 
ajIa^JI jL^ajl (jx ^ j (jSJ j Java Script Aii (jc. i"tWn dJli Jj-as i^ILia (jj£L 

^Ixj" ae-j^L jjj*JI Lgjlill Aja-ajJI dliiflilL (jlxlj LajS ^AJ^_uJI 

J-ai^.i-a j ^j^alj JSjIlj jQuery A*i (jc. cii.i=>.'ii j^=^a (_^l jl 4 aisji ) Y » ^ jQuery 
.^jI^ Java Script AjlII ^j^il JjaJI ^ jQuery jV cVjl 11 a ae-IjS -1*J 

V J ^ia^ JJC. Ig.lxriJ dl.i^Ja.1 J dlljla. 3S3 t_llj£JI IjlA ^3 jl^sLM (_p ajC. Aijia (jc. Lai 
4^-ajjll ClllxJ (jislij t _ s A]l t_u£JI ^3 <la Cliulc. La IjilS (_gill i— udall (_gjlia_allj 4^njuj V J a.L4».,a 
<*33 A^ajg.4,all JJC. <J^-a_)JI I Clll^dc. jdfij V t—lLiSJI IjlA (jl (JjSl (jl dl’lL-aJ j <__LujLL1 

<j£J ca^all (_pajC- ^3 L-Jj,lia.a.H (jx j!i£l JjAaJ V AjI LaS t Igi ^idajj (jj3 AjjIs < 2 kj ^3 a3a.lj 

. l^ASjjt-a L_l 2 kjjj (_ S A]I i— uljail jys i—ul^. (_S^ lU*-! (j' (jj^ l_La-j La (Jjij jL^aAdlj 

^i.n j (_gLJI ^Aatll l_iIj (jx Ajjla. AijL^a <ij£j j 4_iS tiljlij (jl j <_Ja*JI ILa Jjalii (j^ JCjjI LaLld 

i f 

. ^la.'ill t _ s Ac- j.u-a.ll j ioa-s.ll j ^ill <jjli (a^-Li (jl j <J 


^JL^a iuj ^ 


Y. n/A/YA JLaSjJI 




jjyi 

HTML 5 


ir 









V IAjV j «• LAjj ^ (JjLojVI ^>jA*A ,^1111 HTML5 Ail (Jj^aall Ica ^jiali: 

j c^jl XHTML j HTML ^."m.1 (_L-a»a]l Ica ^jAsLiijais o^cil^a HTML5 (jc- cl o,iTi ^jl ^jS-aj 

.HTML Ail 5_ilcJI 

? HTML ^ U 

Hyper Text Markup ALa^ll <> J\J^\ i_ijjaJ abbreviation jL^Ail ^a HTML <jj 
Ail dbau] ^a j i (i_ujll ciiL^ij-a e. Ju^aj Ail^ Aj3j^. jjc. A-a^jiL cs^l j Language 
j* Ac-j^-a ^ ciluu HTML jV ^Markup Language A;4x-iaj Ail ^A (_Jj i V ‘ Xfo-a^ 

. i 4 _jli A -n. a i ^ (, Tags 

(jj£j J tbLali ^jbt-a (_).a.-i.l KeyWOTdS laxuia oCC^-a i_ Sj^.1 jl CllLal£ ^^3 TagS |»_^ujjll lAI 
(JSjuo ^Ac. L_Alill ^3 ^»jjj_j 1I c<html> J <b> JlLa < ^ (_]Sdll y a (jjjojjS ojjj^a^-a 

^Aall jl Begin Tag AjIaJI <b> (JjVI ^jll t^/b^ j <b> JiLa c'jj' 
jpl&VI jl End Tag Ajlgill </b> ^liill ^j\\ j ^Opening Tag 

.Closing Tag 

Jla| ^»cila jl (notepad Jiia) linnj j^j^a y\ ^Lli'Lmlj HTML ClllVnm.a AjlllS ^»jj 
extension blALal J^ci caUL ^ IgijiA ^ j ^(Visual Studio J DreamWaver 
. Lag-ill jjjs V £jia3lj j 4.htm jl .html : ^jjJlAll jjjcIciiaVI 


ft! ^jxjAuI ^ VK\ Aib^all o^-J CS 1 ^ (j] bJ^)C>l V 




^ja 4£.ja~s.a 43LjaL?b Ic- ^j^aj (_gj"l*v <i ^j-a ^jjjLujI (JSuoU HTML dll.Vnm^ (jjSjJ 
^jj j tWeb Pages (t_uj]| cjlajL^j iS c-sj HTML cjljuLa-a (jU <Lii=JI ^ j (HTML 

Web IjlA ^ dllVnuioll oiA opj^s] 

.£jj .. Google chrome j Firefox j Internet Explorer filial ja j Browser 


^.’u.-aj (t_lJj i— ll^L-aa JSjxJ Ig-iJajC. j HTML Cill Alu.a.a oa.|^3 jA ^ja 

^\lljy lgaa..lT>a.m.l <i£J J ^yZillA (JSuulj HTML ^ajjoij (_paj*J V (— U_j]| ^jLajJt.'ua-a (jl 

.HTML .Vnuia j^3 ^jjSjj^aa^aJI .all j (JS-aatL t—Llj 


V HTML cllJulutA 4 jU£ ^Iju ^ IjuI ljL£ 


j (Notepad JlLa) ^_paj > -aj jja-a jA HTML Clll-lHum <j!j£ ^Ixj ^3 l-ljj ^£1 La (_JS 
ajJra~a. ^.la.'itl j opj^s dVi^ai lillL 2 ju ((Internet Explorer jLa^ s- 4 j 

<_]£alj (ils^L-aLlui ^^ill <£LaLM 4 jIj£ ^A — AiijJa JjJaSl (jl tilt -i£jl j ajjo -a. J 


. (_ 1 J^]| ^yajJLAxAA 


HTML Ak 1 J JjSf! JlfUll 

:4_JLj]| CLll^laaJI ^lijL L*-a HTML <La3j_*a <_Jjl <LjLi£j (jVI 
L-i'l^j J (JliLaJI (Jjiuj LS^" Notepad o^£ia]| ^jfLll j (_^ajj^aill dljjja-a .la.1 ^jAj Vjl 

<html> 

<head> 

<title> 

My first HTML page 
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</title> 

</head> 

<body> 

<P> 

Welcome to my first HTML page! 

</p> 

</body> 

</html> 

firstPage.html Li < kLoll Jaa^j j 



( flu’' jaidk j ajiiiJI jt-aljjj HTML SjiLui Jji t'LT : ' JrjT 



\\ 



^ jsu firstPage.html ^jaiL?L i oLall iai:a...i lla3 j'l Jbu j uVt 

^Jl^l JSjill :>ALii] JllaSI J Luui ^lc. Internet Explorer 8 j t_uj3l cjl^ia^ 

I^JjLaS 



HTML AjjULa J jV j^lLolaII (JfLiJI : Y 

(_^oj t _ s -lc- (_gjjaj 4..?>.4jL-fa.SI sLa j HTML <L*J ^Ia-s'LiiL lHajL^q 4 _jL£j lla3 -ISS (_gjp La£ 

^l^kiuiL jJjj fj (Welcome to my first HTML page! <j-ai]l ja .ku^ 

4jJ L_ilJI jj^" 1 > ii IfrjJaLmj ( ^Jc. AajLl^SI sLa jl^ i£LX2 1 "**"'. J P 

. j^s <_y^ aJIiII dj|_)4i]l ciijyj (jl HTML 

HTML j^dU& 


UjUul aJJ Elements jj^aliaJI j^i 4£.jai^-a jas HTML djUaij^a (j-a (_]£ jj£jj 

*d-ak ^jLt-a (_^aaJj djLak jl l ij^.1 jc. IjLc. lijLuj Lila La£ ^>jjjjJI j TagS ^ajjjjJI ^l.la»lmlj 

ATjiadl djLaKJ dlj^l iA'i^I j)C. JjliC. a-Lajjl jj£j La Ulc. J LJJjJI (_pajxu.i^a.\ 

Paragraphs (j-a^-^all' ^lalLa (_pajC- (jc. (_)j|jnn.a\l j^-a’u.SI a-LLuL? Wniil LLla < 'P> ^aja^li 

^ ^X;jL-a4l <_J£daJ ^ajjoi^JI (_^L (_LsC- £-a <LaC- 4_aislxa ^Llui (_£ill J HTML djlak^a (jAjda 

. •A—JLlJI dlLaiL^all 


j <head> ^ju^JI j <html> ^jo^II IgdlLal j^s j < > (_J£dJI j^s (j^ljal j^j ^jjoi^Jl jj. 


.<p> a^jll j <body> j <title> a^jll 


1 A 



End Tag j Begin Teg 5_al aj ^ajj HTML ^j^aljc. ^j-a JSJ 

laLjax (jjajLuJI (jAJ (j^£j3 ^ajjojj Lai ^ ^ (jJjaijill (jAJ ajj) i a 4_iI.1a]| 

^diLal (j-a j </ ^ Slash j i ij^)XAill j JjLuJI Ja^JI I ill 

J£ j </p> ^jll j </body> ^jll j </title> ^jll j </head> ^jll j </html> 

P <_Jjl 3 L a£| 4_i JajxJ Lplc- lLaj AajI^a j Allal A j ^^-ajojj (jAJ HTML ^j^alic. j)AS j-L^allC- 

L-JJJJAJ JajjJu HTML JaasIaC. y-a (_jl (_£ja*A (jl (jS-aJ j ((JaLaII IaJIaas ^ 

^jojj 4jIa£ ^sAaS L-JaajaII (^"iy (jl i-Aa-J 4jlg_j]| ^>jaaj <jIaS -lixi t<j|-lj]| j AjlgjJI jlallla 

(jl (jja. t _ s ^a tt-jjaVli <_j^ajM (<jlgj (_>ja 5 (_^UI) ^^llall jac. AaI-iJI ^jajj (jAalaJI Ajl^ill 

: JLjl ajjaja}! 



-kA tUliLa ^3 <p> jA j ^g^J-La jac. AjI^J |»jaj t_Jjiil e-lg-iV «• la. </ P> (JjVI AjI^aSI ^jaj jV 

«. la. t <body> jA j ^g^iLa jjc. 4jI^j ^ujj t_jjal </body> ^aI^aSI «. la. 

.<html> jA j ^.g..ALa jac. ajI^j |»jaj t_jjal </htrnl> aaI^aJI 







<p> 


! Lolj 1 1 ( _ s _9 A^b j_c pJL_L_uj (j o Lc 


</body> 

</html> 


</p> 


jjc. (jilt <body> «• </body> ^ 

j </html> £-a CljJjSj l^joiaj j i LuhU 


. jvlc.yi ^Siy J V 


White Spaces 


^j^al^xnual ^jc. •• Tab j Space Jj-*) ciAc-bill <— <Laja b? HTML Ajd 

j a^aojlill i . ' ijjp Clllc-IjiJI t_ajLi-<s LujI j L_u^]| t _pa < )a.'lu.u.a 

I JllLaJI (Jjjjoj ^_gJc- 4-JllJI HTML 'iji±ui a?.lja3 cJaflS ^jdajl Of.jj^a l^.Sa.Tk 

<html> 

<body> 

<hl> 

Hi ! 

</hl> 

</body> 

</html> 

HTML o^Liiu opljs (j-« jnfLi 

<htmlxbody><hl>Hi ! </hlx/body></html> 









. L-JJjll (jjajxlLuax Sic. LqLcj (jtiLLala La^jl 


4_Lai-Jb jl.V^ \ /* 


Ajl^-j J 4 jl.lj ^g-XUjJJ I^J±1 (J£ 4*\j\ S-li^Jl dll^lxJl l o^jli 

(Spaca C 5 ^ c ' cij^ljj djlc.|^3 cij^lj \ cJ^^j j Tab 


HTML ^U*l ^UJI Jl&! 


:HTML J-L^rafla.! ^al*JI ^^JjLajS j ^aljlalLallj HTML Jj^alic. t_L^aj ^aJJ 


.Begin Tag aJ-aJ HTML j^v- Lu • 
.End Tag ajI^jJI HTML j^ic. ^ • 
liJljA (jl Laic. HTML Jj^aiC- ^jj-y A ^C-Aj 4jlgjil J (j£ ^JjLiS ^aJJ La <_]£ • 

.(_gjll^-ail 4-aj3c. ^g-ajjij j * (_gl V ^_pa*J 

. (_gj'l^» .aH *La.l.~lC- ^J^aljxil 2JU ^3 -l^.lj ^ajojj ^3 <Lllgjll j Lajajj ^r a, Vi i • 

Jjjjla ^jC. 4_l|juil (_s^ HTML Jj^aljc. L—llc-V (_^ajLaaaJI 4£.j^^-a ^aJJ • 

.Attributes cjli^ljil 

• Lowsr CaSS Zjji. ■ Ajjjiajyi a_S^a.L/L HTML ^>*^aljc. 4 jL£j ^3 L|AjI j Lajlj 14 la^aXa 


lAjitiil <IlaLM 3 aLLoJ 


fjatj 


AJ^jl\ fjuij 

<p> 

Welcome to my website. 

</p> 

<a href='index.htm"> 

Go to index 

</a> 

<hr /> 




t^LVi (JfLuij A^ii^ail ^3 HTML Jj^aljc. (j^s jjjL^a'lC. (jjLuJI ^3 jia^j (_J£ (jLaJ 

Welcome to ^ jL^all j </p> ^jiL j <p> ^jiL Iajj <JjV 1 jj^a..t*.Il3 


r i 








</a> fuaijl U j <a href="index.htm"> Lu Uiu my website 

chref J] index.htm 4-uSll iiJ ^ Go to index j 

^ajojj <_s* J AjIaJI ^auij Qj£lu (_gjli^-a]l ^aJ.}C. '■L ^)j^al«JI (jl (jja. 

.<hr /> J^JL 

HTML ujUL^I fbd! Jiill 

lyjlalia dL>b (_j-a HTML A^Qi^i QjSjj 

:Body Section A^L^ t Alkia • 

^A> Asla'i-all o^A j </body> J <body> ^g-ajjj (jjj oj^^o^-all 4.£iaLa3l ^A j 

<^L^ail ^)Alia]| (_£jll^-a]| (JlLaj ^..i-a.^ -» > >i'l j A^A. a^nl] <_J£al]| ^lAjj 

pj^JI yli j ojlA Aic. t _pajjt.'~u.u.a ^3 jgJajjgj j 

. 4.jIaLaIl ojlA /^k yjSjjoj HTML jj^alic. (j-a ^)jSVi 

:Head Section A^a^il ^ Alkia • 
4ilai-aJI a^A j </head> j <head> ^-axaj (jjj oj^^a^-all A^Jaxall ^A j 
(_pal^)*Ajaj| JhC. ^k j,g_la.) V lg- jlc- 1 HTML ^jj^aljc. (j-a Ac-j^i^-a 

(_£jll^-a]| <jALa yC. CllLa^Lt-a a-UaC-l ^A <£LxLail a-l^J 4-a^-all j 

Ig^a-laJlmJ (_gA]| j o_)Alia]l JJC. CllLa^Lt-aJI ^j>i» j\ AALjal Ar^L.-allj ^2k_j-a]| 

.t_Jl*JI ^k j £y* 1 " T clil£j^-a 

: Y f Vl AHaiall • 


. 4^. oj£^ll Uu. 


i Allg'W' jA Lftj] j Cy* L$\ (js^ ^Ha*-suall I^A ^aJ 


Y Y 




■LLiabaJl ^A Ailaj-all aL& j <^htlTll' > j < 'htl7ll' > ^ajaj ajj i .all 4ilaLa]l ^A j 
^^3 l-l£j j AuiaJI j ^gliilala ^ajdaJ j 4-jl^j J 4jl-L -i-lals 

.HTML ^4^0 , ^ Liima <_J-al£ 


: ( ^JLLa£ HTML .Vnm^ <_5^ ^LJI JSj.'j.H ^jSL l-i^j j 


<html> 

<head> 

I La ij _g_S > tii j_ a I la I I j_j i_c yj I j 1 I 4_JLlaJ o <j _j_1j^_o 

</head> 

<body> 

I La ( j I i_Lj{_J j_a I la I I j L _ ! _J I ^ i 1 I 4_> sua I I (j j_L*_o 

</body> 

</html> 


Attributes Ljliualj 


qa kc-^A-yA a-LLjl ^ic. til] ^-ii: HTML AJsJ (jL LajLuj a lik La 

dllSkij^a ^^3 II^. A^*s a ^yajC. HTML ^jL^alic. ^ja jj^aic. <_]£ A.aqa i 

t^yajxl ^jj^aljc. liJliA j ^jazjxI ^)j^aljc. tiJliA j Jj^alic. 

(j^s ^_^ala. ^jojj a^A i^ja jj^n\c. <_]£ a-LLjl ^jj c^JI •• LiflkS 4_nx-Lu]l 

. LafrLu jaUo]| ^L-ajxJI j_gj'W a (j| j > 4jl^j ^jaj j <LiI.Aj ^jojj (jjfLl j (HTML 


^_pa_)C. ^lill j ALaLdaLM ^_)^ajL-£xaJI 4c.jAyAi U^~ ** J AljJp 

(Jjjjoj ^^Ic. 4_Jtill ajjUd^ jJajl ^Attributes CjliL^atjJb <— S^jlj La ^)JC- ILa |aJJ j aljla-aJ j^a.’u.Sl 

:JHJI 


\r 





<p align=" center " > 

yoj-tn. J 1 I (jij-C 

</p> 


1 I (j 1 


j VI P Jj-oiajlj (_^aLiJI “LiIaJI ^joij ^1 S^iljjuall sIa ^3 A^LiaL llaS .193 Ja^b La£ 

center A^uall Ia lit l^r- 1 j p j.wa.im..\l l 5-^I sbb*-» .naj t _ s ^l 3 1 i 9 n <ij^alj]| ja 

I^llLaS (__>-aill j^-laiuj l^jJal^xilojI -lie. j <asAL*o]l ( Q-^raVl-a ^3 (__>^aill (jaajsJ 

J] 


t C:\Users\ Mukhtar\Documents\My Web Sites\default.html - Windows Internet Explorer 
'' ' C\Usei^\Mul<hta^Documents\M^^^^^^^^^^^ 


P - 


# Favorites ^ 0 ] SQL Injection and Cross-Si... 0 1000 Popular jQuery Plugi... 

a ^ 0 - L3 9P ▼ Page ▼ Safety ■» Tools ▼ 


^ C:\Users\Mukhtar\Documents\My ... 




aijl ^ -- ’. 1 


Done 


ifc Computer | Protected Mode: Off 


. ▼ It 125% - 


align slaWall Aau*alj icaLJal al& *- p ^ j . : ja ; v ^js.-u 

j Attributes ciilai^aljJI (jas lalm A3jj*-a ^x-j^.^-a HTML (j-* ajI.ij c l-'ua^. 

<4^ra'^llj c4ii^l_jll ^11 lAjlLai] ^aJJ j)l jAxJ CS^^ ^J^l O' 0 ' ^ 11 *’ 43jj*-« itjAi-a 4.9-L-ralj (_J£J 
j£-aJ ( ^i]l (ajill J JlbaJI (JjUn j^lc. bll-lJI ^ajajj] lalm 43jj*-a]l ClAamaljll (_£.l^.l ^A 3 1 j Q n 

center J\ j^l J\\ lK u]I sbUb right J\ jlmJI J] ^^l sblamJ left ^a l$JI ^ J 

j AJlC. L" U-IjJI Aic. ^amj (_JS Clllamalj (jiajC. ^JLL i n j C Jam jit j^JI j.ol\l aljla-a] 

^1 ja name <jl ciu^ "name="value ja aA^\J 1 ^Ull J£AAI J Jjall ^b V <jl j>L>l 

(jjiliisl ( ^lalAx. jjjj £majj (jl i J't] ^lil) J Aimaljll lillil o.Vnuoll A.,a..i9.\l ^A Value j A.9mal^]| 

• ‘ (jjj-j)bs j^liisl (_gballlc. jl " " uAr^J^j- 4 


.Lower Oese j j ^ \1 HTML Cjlia-alj j jl l-ixj i a la^xLa 


Yi 



£-a 4 jI.1j1I J j Aal£ HTML Jj^aljc. (jc. du-laJll l.llj (jl (jVI LlI j. h'i ljj| (jlal 

<l£jJaLa]| Cjlaj^aljll (jx <C- j-a.:a..a.l ^jxaja. u j liUi <_Jj 3 (j£J j cHS3ClinQS (jjjliaJI ^jxxalic. 

iCj-laJI (_gAlLaJS j c^jjoij]I tilL (jx ^ajaij <_}£ £-a lAjlj£j (jxs V -ll La HTML ^jjojj <— lie. I (jjJ 



AiLa^l jjuiJl 

<LLufl(j]l ^Ull 

1 ajj ^jx-a»j*JI £-a (_J-al*jU ^ui^) IjlA ^1-I^JxjI ^JJ 

(jj^ 1 j^-)-^ ^ a?\ 

id 

l$J j cjQuery J Java Script ajJ ^I.WnJj 

^ JJ i i\j\W A-LujjJlj 


ojfl 3 ^3 IaJI^. 1 (_pajC- ^hui (_£ji.l CliLal^IlujI 

tiaaV 2ukWI 



(jx aLajl (jl Itr copljill ol^jl 3j. Wil 

Itr 

dir 

(j-a opjjill aLijl (jl (_gj*js rtl Ual (jAAill ^1 jLuiill 

rtl 


jlouJl (_gjj (jJ-aJl 



(_jxaill oliL^-a \vW'l 

left 

right 

center 

justify 

align 

fJAui j jj^-aia.ll ^1 4 jA]| (jxajLxai. 4il£ ^La] 

^JLxa CSS Aj3 ^jojI (_£ 1 

class 

CSS3 -J (_^al^-ll (_L-saaJl ^3 (Jja^a3u3L l3A AjuisLla 



ll.-a.XijJ jxxajaJI jjjxill ^>3aJluU 

jsjjs ^jxI (^1 

name 


HTML Uc- i—iic'i (jjj LjlL-a^ll : ^ Jj^aJI 






Headings £jjU*JI >uaUc- 

j h 4 j h 3 j h 2 j hi :t_ujj!JI ^ic. <_s^ j (jjjL*ll o^y-* aJjoj HTML Aj2 ^sjj 

Lafrjjj La j jiu^aj I jA h6 j^-^almll j Laaaa. Ia_jj£I jA hi ^y^alxl] (jl Clu^ h6 J h5 

•A-iilni) s^ajjuall Leo ^Heading 4-alSl jL-sa!ii.l La h Jl < aj^. l*jJa j t^a-all 

: (JliLall (Jjauj 



;J_Jtlll <^_iiJI JA LLim l_u_j]| t _paj»'n>,i.a AJjLuJI 4jiJj_*a]| (_pa|^«Jjail -lie 





h6 hi uJjUnil jusUz jUia.1 4 vi.^i : t 


J ,Vnm.a\l IdO. 0f-^)3 slajl .l-laj ^ill J d i f <body> fuuujll Ajjjilj liaS .123 Jaa^lj La£ 

Ls jA j right to l©ft ^LaiJI ^1 jy^iJI oe-j^l sL^jl j l^J rtl 4-aiaJI ^LLojIj lias 

<Aia3l (jU A-<sj 3 A_il Ja«J ailA (jl Jla. ^ J t^llallj A_uj*JI 4 jl 11 ! i - I mlljj 

. (j-Laj]! ^1 jLJI jj-o ^Lia^)j3V I ae-j^ill alajl (jl (_gl ItT ^A ^..ijJaljlsV I 



Horizontal Line Ja^\ LiJI j^ic. 


:^J1j]| (JljaiJ jiajl ^3 4^23^1 Ja^laiJI <hf (j^aliJI |ajajj]l HTML AjJ ^».l£l 





<hr j** ^ ; o 


Y A 




Comments ditLkill 

*♦ 


ji J*J V l^jl il ^cJIxj V Aaa-Jjja Jl jJauil <jIjS ^Ic. <j.lila.\." <ti-ajill dlliJ Qji~aj±dl ^IjC-I 

ojlis JIxj Ig.-Li-ladl .Sj*j La-lic. oja-ldll plj^.li 0-a_)j-<ill JaflS ^.laduU Liil j ta^S-UaH l<t)^. 

La£ A. }L--aj Ax\ HTML (jl ^-a j cCOfTHTientS djU-lLdilj < Sj*il j IgmV I aAA j cy-aj]| y-a 

<jL£J A_llLill “LaljtJI 4jt_lx^ill t dll, Vn moll ^j-a.-Jra dlUj.Ld.ll Ajii ^)3jJ Lg-jl VI IfljLoi dlls 

•cj.)'*' 1 '! 


< ! -- comment — > 


:HTML .Vihia (j^uJa dlU.iLtj\l ^l.ladml j^ic. (_ 5 ^l-^l (JLlxiil CA Id'll 



rs 






e-liil <_gi V CllU-ilajJI (jl .s£1^j Laa l_u_j]| ,_g3 ^gLLaS AijLaJI oj 9 j >?i\l jAjj 

:("View->source" jl " ^_pajc." jaVI jLn^.1 ^ (_paj^xijail 



<Lxi*-a]} j^Jaj V j jJ^oaII (jiajC- o^U ^ jJa^VI j^iib j^iaj CjlljWill : 1 JLuJI 



Paragraphs j^aUc- 

a 3 a £.L3j| (L_l]lx]l ^3 4..LL^aill CllljHJI jja A^-ja^-a ^ja jxSIj]! <_gj L_)J^]| (jj£lsj 

<br aauj]l aKhill j (AiLullI ^JAaV I ^gj <al.l4.'Lall lixa ja (_g3]l J 

l^J Enter ^-laiall < ij^-a l^as laj dAc.j_)iil < sjla-a tiU3 j ^gJlAll jixaJI ^gJI Jjjpi] 

.lijLaj ljj£3 LaS HTML Axl A-a^a 

Text Formatting o^J^' j^Uc- 

^)3jJ Bold laiaJjC. (_Jx?A3 J^laill] ^)jL-alixll (ja A-C-ja-N a HTML Ax] ^)3jJ 

jl) <i> ^jaaiix]! jijjj Italic btjla ^_)^aj]l (Jx^A J c(^StrOnC)> jl^ <b> ^)aaajx]l 

r . 



^)3jj Delete t—ilajuj] j -la^. j i|^6m^ 

: (JliLaJI (Jaijoj ( ^ c " actual I t&Lliil t <del> jj^aiaJI 


<html> 

<head> 

<title>(^^/L-LJ I i_LJi jyr, l_Lx_l j L_i_L3- 1 ij^_dz)</title> 

</head> 

<body> 

<P> 

This is a sample text to demonstrate 

<b>bold</b>, 

<i>italic</ i>, 

<u>underline</u> and 
<del>delete</del> tags. 

< ! — I jl> I j I j. lo us J j _) i 1 1 <br/> I i 0 I — > 

<br/> 

You may use other tags to generate the same output: 

<br/> 

This is a sample text to demonstrate 

<strong>bold</ strong>, 

<em>italic</ em>, 

<u>underline</u> and 
<del>delete</del> tags. 

</p> 

</body> 


I 


r 






</html> 


a!ilc.l ajfljjJllI j-Ijj 



j^-aUc jUli.1 <Lxiua : V JLuiII 


^^3 HTML ^3 lAj£3 ^ nui ^u*i n jj-alx. lAJa^Xo 




Special Characters 4la\±l\ j>a j cijU-all 


JjJuAo JAjJ IgJjljS JjjjJa (jC. ^3 IfrjJajC. jjS-aJ V J 1 ^j>i» J tiJliA 

4_ill HTML 4JtJ ^)3 jj (IAjjC. j ClAc.]_>a]l i SjLi-a j CllLiiialj_)]| ^^3 ‘La, , 'V'nii.a\l JA 

<Ajkj value 4.^.>aSI (J-ajjjojIj &valuej <*-^0]! ^-liiL j aiA (_pa_)*J 

a3A jj-0 ^3Lsj <_)j.laJI (_5^ J 4-4_jil i^yajuUuLa ^3 <j^a_)C. ^aJJ (jl l_1j 1A&1I i aj^AI 

: • sjlaAl 


: ±*\J\ g_Lul jiaa J-&1I JjiaJI ^ ^ 

http://www.w3schools.com/tags/ref_symbols.asp 

rv 




XHTML a j - ^ >jll 



HTML (jh <L-«aLk]| LJjla-aij <jiaju ■ ^ Jj-laJ! 


: JUI Jll^l 

<html> 

<head> 

<title> 

■bz> Vjk 1 I i-jj Lj*_o 1 I 1 j I lJL 3- I 4_pt —Sua 

</title> 

</head> 

<body> 

<P> 

3 &lt; 5 and 10 &gt; 2 and also 3 Sne; 4 .... 
all rights reserved for &copy; Mukhtar Strade; 

</p> 

</body> 


</html> 






<jda jC. Ajc. jAjj (_£a1I j 



<L^iua]| jji A^aliJI ui jI^aII O^xj ^hVuaV Jlla : A JUJI 


Hyper Links LjIjjII j^Uc- 


j tHyper Links Lie. ^jc. <aii^_<iSI diL^jj^all (jjj 4_JT HTML Ail 

^ J) ^ ^a]| (j^s Ig-jlc- jilll Aic. dllljj ji ^_^ajjL-saj ^jC. ajLc. -laj|j^)]| 

ajLiVi Ajc. ajllll "aj.ij.L-a Aj" (_pa_)*j j ILaJJ CllLiajaAujjx ^ajSJ L_Uj 

ajj c Anchor J jL^i^.1 saa 3 Jl j aju^l 4_laml^j a-Lijj ^jj j c-lajl^jJI a^. 1 ^Jl 

jiiJI Aic. JliliVI ^aJAjgi I aA^JI Lsl <1 aS ^j^ajx . J ^j^ajj -lajl_^l AjjJjj 

jkjlla tHyper Reference J jL^iU ^ ^1 j href Ai^ljlJ oajjjj ^ 

ijm jtuii 


<html> 

<head> 

<title> 

J a_j I j j 1 I j^/3 I Lj? 1 j 

</title> 

</head> 


SLjjO 


n 




<body> 

<a href="http: //www.microsoft. com" Xli j j_SLj L_o</aXbr /> 
<a href="http: //www. google . com">Jj>^></aXbr /> 

<a href ="http : //www . msn . com" targe t="_blank" >MSN</a> 

<br /> 

<a href="firstPage .html" target="_self ">J LjL_« Jjl</a> 

</body> 

</html> 




-lie. 


Vi kulj^ll >^LaJ jL0>l bJua - Windows Interne 

t Explorer 

C=1 

iHlUgW 

^ ^ C:\Users\Mukhtar ▼ 


X 

Sf Google 


p - 


Favorites ^ ^ SQL Injection and Cross-Si.. 

^ r j«^5LsJ jLiii ^*1" w ^3 


“ ▼ Page ▼ 


» 


» 


MSN 


Jj 


I 


i%* Computer | Protected Mode: Off 


▼ ^125% ▼ 




Jajljjil j*si\ c- jLu^l ^ JLuJI 


.13 j ajig di\i i_jJa3U jJjluj ^ill jj^aljc. (j-a 4£.j-a^-aj Ajjjilj IxaS Jsil 


j (Ji^aaJI I^A ^3 l*-a IxaS (JjVI JliLall <— iLa ^ 

Relative «Liimj jl Absolute ^.ali-ax (jl 


ro 



UJ I t_kL Path jLoia j)£. IjllC. jjjSLl JjS-lall -laj|^)ll j)l A-UioulL -Ik^SJ j (jj±Sn laji^is) 

(jjiflj ^gk firStPa 96 .html I S-i^JI A^i-all dljl£ 333 llill^. ^3 J AjlliJI A^Aj-all Aljaiilll > a3frll 

. 4_lll^ll 4^3, ^|\1 ..iW.a 

A33^)a]| href ASa-oljll ^3 jjSjLall URL Jall^ll ^1 (JlsiijVI ^aJ-Lui -lalljijll £>3A 3^.1 ^^Ic. J^jll 3j& 

ASi^aljlll Jaj|j^)ll ^j>i» ) 3jj|j2l liaS lijl jSilll Jj3aJI j)A tAilc. ^)ii]| (_£3ll -laj|^)ll 

aLjjVI ^Jc. ‘-T J 4r k -' Igjl ^.'m„aj (_paj»'nn.aH ^3 <— S3^JI 4.^.9 -L-r-iil jjl^A 33ij ^ill J taTQet 

:2uM 

Aij-aljll AajS jla aII^JI o3A ^^3^ ?4_ill^ll 4^kjj^a]| (jjiii ^3 t- .'a3g.ll Aakij^all (_paj£- -»“n > « <_Ja 
( jla aII^JI o3 A ^gk ) ?S3 j3 ^ ^_yay tJj-a-a a39li ^3 t_a3gJI Aakij^all ^yajc. ^JJjoj (Ja Self Aai9 .1I 
(jlfl a!UJI £>3A ^^3^ V 33,-^.a jUal t_a3gJI A~a.3j^ll (_pajC- ^Ijjoi (Ja blank Aii^ljll Aaj3 

. ^ lia-V (_].L-ra9A (_]8 joU ClljjllaV I (Jjljj -an i « j jUaV I ( ^A Aja^aljll AajS 

^)3j!1<i ReSOUrCe 3 jja (_$l ^1 jJjaj (j^ j£-aj AjI Ulla. -lailj^jll j) C- oj$3 i - 1 -n j Ls 

lilli J E — Mail ^jjjjSJI 3 jjj Jall^H jJalj (j^-®-! LaS t Cillakij^all iaia (jaill j L-Lljll ^^Ic. 
C^tHI JllaJI jJajl cAI Uailj ^jJaj (jl 3£)j (_£3ll 3 j^>j1I lJ^ mailtO: A-ajfill £jdaj jL 

<html> 

<head> 

<title> 

4-l Z> Lj> 1 2_> I j J 

</title> 


ojLj) Jdja. xj* Paths Cj|^Uii-all jjo 4j)dl (ai*J 

http://msdn.microsoft.com/en-us/library/aa365247(VS.85).aspx 

ri 





</head> 


<body> 



La j Save Fils Dialog < kLaJI (JiaVi ja JjVI ^^Sc. die. La 

Outlook JL*) cs-Lsj^V^ jJ-^a ^-“Lj^j jA ^Lill <- a Lai I jiiSI die. iLj^a-im 

^gi jjSdall ^gjjjj£J^I dj_)JI adid^. <LlLajj (JLojjI £adaj ^3 (ExpreSS 


Images j*e Uc- 


jj^ajaJI jA IdA 4 AjjL^a 3 l ^j-ajda jj > L-aLi. 


HTML Ajt\ 


UjLu^a t _ s -ic- LLcOC- 1 q M jJa ^JL j (Image J \jl^\) <img/> 

4jUiu3L <JliJI jA La£ j t(SOUf"Ce J sre ^)JC- ^j^ajxll JJ-aJ 

L_JlxJI ^3 |»lxll <!£du jjjj idlld] J Ajlgj ^JOJJ (_§ I dilLaJ V <img/> (jla <br/> 

Jllall 3 aLLu] t <img src="path'' /> jjl: 



rv 








jlu^l A \ * (JLiuJI 

(JS ^ ajj£.la]l CjljLaJI Cllli jjj^all i^yajx . J jji^ill ^_pa_)C. y^aiiC. ^»ls ,3a3 Jaa^lj La£ 
^3 l^.-JajC- ^Jjj <J-L^gj <LajS IgJI ~'' Ull '~ 1 3 It IjlA dllL^alj (j^s j (<ilTlC)/> 

li*-a i" n^*\ <ll^JI ajlA j STC ^3 ajj£ia]l ^Jl j-lxj Jl^. 

ojjjjL^a]| (jiajc. (jS-aj LaS a3A (_paj*J -la^aS qC. jLoiaj IaLj^jJ) j 4jljI_)]I 

^^1 j width (_pajxll j height ^"iq > irng iijjj ^c. j 3 , vs a ^jjtLaj 

rA 




pX La t-l& j ^UjjI j ^LloSj ^aJ3 L&friS] ALujj 

« ^ S.VujjaII 

1 (JjaVA >.s-j j ^atj 4_^3j^a]l ^_yajC- <j\i ^ iSS'^"' ^ ^jl ^^Ac. ’. \a 

JL*> ^9 oia l£Ix3^a ^Ac. Ijulj ^ . \ U * ] J La IAa j ^jola^AI ^)jj-all CjliLa j 4 c_aLa ^A diliLa 




jujy\ 


LjIjjII oAj^aj <> j>a]| 

dlli j <3> Jaj|j^)]l ^i^alic. .a ^uaj^i (Jl.liiml ^»JJ (jl L_UjJI ^3 £jLai]l ^j-a 

^j-a V-iJ (> _5-i c - -lie- -laJ^U t- i-lg-." JlSliVI ^aJJ i*hl*s J ^3j-aJI (_gj'l^» a (_).,ba.^.lj 

(_ _paj*j ^LLajS j <3> ^z^alutll (_£jlia-a£ <ilTlQ^> Jj^salxll yxajJallJ lilli ^aJJ j LS^ 2- 

Idllil UaJjgU Vt-a 

<html> 

<head> 

<title> 

Ia_) I j 1 (j j_lj^_a_^ o j yi> j_c 

</ title> 

</head> 

<body> 

<a href = "mailto :mokhtar ss@hotmail . com"> 


<img src="myPic . jpg" alt=" 1 J JJLu> I j" /> 


</a> 


</body> 

</html> 


r 









Jajljjli sS'^ ^ CP fhVUal : ) ) JljJI 

Image Maps aCjj^II kMjiJl 

(<_J^J^a Cl lUL ^^Jc. ILa ^jj j (Uajljij La ajjj^a oA Vs a a-j^J Ajjjjuall JajIjiJI 

A-ijLill Lai t <img/> (jjjla ^jC. (_£.liii <_J£dj 4-^jj^a]| ^3 ojjjj-a]| £jdaj ^jj ^jl ^JjLM 

j quails <J <jL-£aliaJI 1731716 <lj^al_j]| A-ajS jliulj £-a <1713 P> 4_laJ_)iJI j^ilC. a-LLjl t _ s -g-3 

^ .LjIjj ( __ S -5J (Jj.'viLui (jlalloll CiLjIc^L <3T63> Jj^aljc. qa Ax-j-a^a-a a-LLil j»j ^ja 

cliuiL dlJL 

:^Ll3l Jllall caLLi] 4 S jjp -JI A_ualiJI usemap AiuoljJI J] 


<html> 


<body> 


<P> 4_L C Cj 1 0 j_L*_4 (JOJ-X 1 <-Ld 1 J_S 1 1 JL> 1 

u-L® J- LJI </P> 

<img src="planets . gif " width="145" 

alt="uL5l jJLJ 1 " usemap="#planetmap" /> 

height="126" 

<map name="planetmap"> 



ojjjjL-all 




^jj Ailllilll <i^_)-aJI j i .oil 


4 L.jj-C II 


^JOJI 



<area shape="rect" coords="0 , 0 , 82 , 126" alt="oiuujJ I " 
href =" sun. htm" /> 

<area shape="circle" coords="90 , 58 , 3" alt=" I " 

href ="mercur . htm" /> 

<area shape="circle" coords="124 , 58 , 8" alt=" o j_a j_J I " 
href=" venus . htm" /> 

</map> 

</body> 

</html> 





<Lj Jta : ^ T JiuJI 

LuJ lklilaJC.1 j 4-laJjiJI e-LjjJj IjIaj ->j c^jl AjLdal CIlsj .}S3 LsS 


<map name="planetmap"> 


t \ 





Al (_5^1l j area ^ajojll jjC. L_i£Ij£ 1I (ja t_l£j£ <_]£! A.4la ba a-LajL liaS a21i .iaa 
ClAjjl.la.^M A.4.L-i-alj ( _ s ^-3 Aajliil! lal ^(^lII •• t4 LlalLaa) Ailaiall JSaii ■!;, Wi\ Shape 

(Jilaj (JJadjobaJI jlajl ■lie's’ll (JjlTnnall Alla. CIjIjjI^.1 AjljjI jjjaj llua. COOTdS 
£j]_>ll j Cllllill (JlaJ laijj (J-Jalmall (ja (_5jla.ll jauj'il (j£jll ^IaII J <-]j^ (jllll-la-V I 

j£ja (jl jliic.1 ^Ac. Ia& £jlallj j te.li.Wil t_sl£ IllA j (JjJalmall (ja ^iijaill (jaj^M (j^jll 

jjoliVI (j£jll jA ajja^all 4 jjjI£j^ 1I A la-N II 
A_lakill (jl 3 l.i£j j tojjjj^all (ja (jjlaJI 
(jb-iaj ( 82 , 126 ) 4 jaiill j (»,») 
^jajall (JJaiiuiallj (jaaaall L_l£j£ Ailaia 
aliS AjjjI.} 1I Allajall Alla. la I tlagnj 

j^jljll j (JjVI JJaj Clj iliil.li.1 Axili jjjaj 
j C. Cllllill jja-i j a_)j|2l j£ja Ai-a.a'i (jc. 



^aLLaJI (jh ‘< ^ ^ I-IoaII \j'\'i ! \ T ^J£jJo 11 


. LfcjlaS 1 kiaai 


.ojj) j. >— » lLa A^ualabll USemap Aiaaaljll ^11 A_lajjiJI ajojl jjjalii lia3 Aalgall ^3 j 


$ ja_)]lj iBjluia USemap AL. ^aljll AiajjiJI ^aajl jjaa ^aJJ lAja^Aa 


Internal Linking LjIjjII 

^ n .-i 1 eCA Jlla AlU. ^3 j la 3^. ^1 ljia£ Alia.a A. ^.4^3 (j aua 3j2jall (jjll^all (jjfil Lll^.1 

HTML AaJ jSji tdlSjll j .Ig. 2 k.ll (jiaaj (Jjjaa > iii A_ila.C- A^ia^all e332k-a ejis ^1 (JlfliiiV I 

Internal Links A_il^.l3ll -lailjjllj t_Sjaj la jjC. e_)Culaa A.2k.4.utall (ja 33^.a aji. ^11 (Jliiillll Aall 


£Y 


yii j <3> Jajl^ll ^joij ^I^JjujI ^)JC. l^jja^j ^aJJ ^jjI j 

JSjjaJLj href <aj_^aljU 4-a ia£ 


<a href="#id"> id Jj^uU I j 3 


^s-J t J— ij-J I </ a> 


ojiA ^jdajJ (JllLail j (j-ajda 4-lll JlaliVI t—ijjt-a (JlLaJ id (jl l— 1 


<html> 


<head> 


<title> 


:>Ij_JI d^ljj_JI L5 J_c JL1) 


</ title> 


</head> 


<body> 




<a href="#Para4"> 4_s_) I j_l 


LS _ 1 1 </a> 


<hl> 4 _ s 1 _9 S? I o_ 


</hl> 




; _3_!L^_o I i_a</p> 


<hl>4_> 3 I 5 II jjJJJI </hl> 


<p> i-pj l_LJ I o_ 


; jJLx—o I i_a</p> 


<hl> ULJ l_LJ 


</hl> 


<p> 4_1 1 I 5 II o j_JLLJ I (j I i_a</p> 


<hl id=" Para4 " > 4_x_> l j_J I 5 


</hl> 


<p> 4_x_> I J_J 


l_La</p> 


</body> 

</html> 




Lists 

jj^aLic. (j-a jjcjj HTML A*J jSjj 

.<ul> ^j\\ Unordered List A^jJl j±. ^IjSSI 
,<ol> ^oijJ I jjc. Ordered List AjGjJI -Y 

j <N> jj^aljc. jjs Ax-j-a^-aS Ia I ji J»-a L. ftjjJal IgjlAajL L_JCjj A-ajli]| £jj ■li.Vs’n jl Jbt J 

: AJajjou Ajjj^i jjc. A-ajla t - LAjj <lij£ j^aj*j jjill j ^lAll Jlla]) jaLAoI (List Item 



I^JjLaS jja_>3i!luiAll AjJojC. JUC. j-ll) (jill j 






AJsjamj Ajjj* ja& 4 _ajIa] JIoa : \ £ JLuJI 

j <0l> ^1 </lll> j <Lll> qa 4-ajlill jjL-iajj.' AjlgjJI j AjI-lJI 



A hj< u\ Ajjj^j AajIS Jlla : > o JLwJI 


£ o 




(_g_pu (jl HTML 1C - (_5^ lL- 53 ^ lift A_iI.Aj -Ha UJjSi LaS j £±la]lj 

<-ajli (. Laiij ^olaJjaij bjl IjlA j (j-a Ai-j-a^-a AjI Ajjlgj j 4jjI.1j ^^-ajjj 

:S£»11 oA& ^jdajj JliLaJI j ilgj ^)j^aljx£ 4uc^)3 ^jIjS 


<html> 


<head> 


<title> 5 -l_Lx_o 4_o 5 1 5 ls _Ls J 1— L_o</title> 


</head> 


<body dir="rtl"> 


<P>l_) l_L$_J I I Jus ^_9 


<ol> 


<li> 


HTML 


<ul> 


<li>Ja_) I ^j_JI</li> 
<li>j I </li> 
<li>p-u I >JLJ I 


<ul> 


I </li> 


j_uc</li> 


</ul> 


</li> 


</ul> 


</li> 


<li>HTML 5</li> 





<li>XHTML</li> 

<li>CSS</li> 

<li>CSS 3</li> 

</ol> 

</body> 

</html> 

I^JjLaS (_pa j )».'Lm.a]l aH-C.1 (JULall 



dd&XA ‘Lojls cJ^*® * ^ ^ 


<11^. 4-ajliil (_]£jlu jjjilll typ© al-litfujjl Ajl (jC. (. —La. i La 

j-aj circle jl disc jl spusre AJlLlI jliui] (jS-aj jjc. 


jliuij (jS-aJ 4jjj-a]| 4_ajlill <Jla. j ^Ic. 


<_]£ |»Lal jl jl ^Jj-aJI 


i V 




cAjjjC. ^1£jL ^yP® 4.4j-ra'j]| ^1 \ jll jl 3 jl A jM (_£.l^.j 

AjjjjV ^ISjIj cSjjjS AjIuV ^1£jIj ^jSjj tajjj-L^a AjjjlVil <— sj^.Ij ^ji}jj iojjjS 4jj.ala.jj <__a^.lj 

. t_JJJJj]| ^^Ac. Sj.;l«.^ 

<dl> ^I.^JUaiij ajLAjl |»JJ dll^UajL^aAll ^jljlLl i Sj*J .la^jj 

JllLall ^aLU t^djajjxalt * aj^jjtli jj^aixl <dd> j ^Haj-^a]! jj^^\x.\ <dt> j 4-ajlill 



I^llLaS dll^Uaj-a-aJI 4-ajlS j-llj 






(jia jxIuiaII (ji j-Lu I j£a : \ V jLutll 


Tables JjIjlsJI 


jjc. ^jj j <table> jj-oiaJI c. c-HiV HTML Ajd ^ajii 

jj-a j C(_Jjui£jJLj border ^_yajc. j width j Vjl "^table^ 

Ajjaao ^jj j table rows jinn' j-waic- ^ic. Clllijl^-a *LSi] 

j (_$■?£*. ^Ic* (JjAaJI ^lajoil jiin (_]£ table data L£ili. diLjil^a ^ j»j t <tr^ > 

I^gJjLaS ^Jj-a (j£Li-l IgJjLaJ (jS-aJ ^»jjai_jJI loLa. (Jig jou] j t^td^ ^jjC. lili 


<tr> 


<td></td> 

<td></td> 

<td></td> 

<tdx/td> 

<td></td> 

<tdx/td> 

<td></td> 

<td></td> 

!<td></td> 

<td></td> 

<td></td> 

<td></td> 


</tr> 


f LuuV ‘LaIjlLuxaII ^ \j Vi : \ A (JfLaiil 

<Jj-la. frUuL ^ajSj AJlill a^ajaj.11 A&Lij lie. Jl j!i£l <^jjJajJ Ajxj lilac. ^ajg.4,a..\l I1 a (JJfLdJ j 

;JaluU 


£1 





<html> 


<head> 

<title>-kL->-aL_) J j a_> «• Ljj 3 1 ls _Lc J l_L_o</title> 

</head> 

<body dir="rtl"> 

< table border="l" width="50%"> 

<tr> 

<td><_) LLSLJ I poo I </ td> 

<td>j_«jiLJ I </ td> 

</ tr> 

<tr> 

<td>OL_) I Zst-oj—></ td> 

<td>d o »</ td> 

</ tr> 

<tr> 

<td> J I I j— ;</ td> 

<td>'f * * </ td> 

</ tr> 

<tr> 

<td><_) I s? I ist-o j— ;</ td> 

<td>V o »</ td> 

</ tr> 

<tr> 

<td> j_UaJ I p_Ls_j</ td> 

<td>o *</ td> 



</ tr> 

</ table> 

</body> 

</html> 


I^liLaS L_Li^]) -j^a^Xaa-a 4aJa_)C. Aic. IjlA jJuj 



Jlj< u\ JjA^i f ULil Jlla : \ ^ (JLiuJ) 

^gi£JI (_yaj3t}\ ^jx °/o° ' Width <tsbl 6 > JjAaJI ja^aic. £.LxjL Si ji lixS -iaS lillj LaS 

-Ij-li. [_yajx . J jt^ ! lill j (jl JraSaTLil ^jxaja.Iuxx.H oiljlj jjjim JjU.) A^ia-all 

jJaxall I^A (_g_^ 2 aJ c<tr></tr> al-lrLTmlj jiajoj a-LaajJj lixS c<_Jjui£j ) bOPdSP 

lix3 t" jn .ill" 4.x. itll Ajjlilll J "i— itifUl 4.x,;aH <tdX/td> yillii. ^^Jc. 

^Jxaal ^-jjda^xl) (jt ij)b\ i L_n£JI CllljLlJ ( ^ill L i ^)lajaiV I £x L_) I ^jx£j 

.Jj\ 


4jlS 4xjC..1a]I djl.l^.l^]l (_>ub3 a-l=Jj ^L jl 1 ■ >* jl _J ■ t&j\\ J ^_yajc* 4xj 3 aUaC-l ^j£xJ :<ia^Ax 


. lia.V l&j£j jaliau 1 ^j]I j HTML 


a \ 



: jjlalia ^jjl HTML jps (Jjjia. (JS ^joi kj 


j <thead> (jjAm^II al^Huilj auuikit I^a Lijj :Table Head Jj-i^JI (j^lj Aalvi-a ~ ) 

j 4jjIaj ^ajljij jjjj <tr></tr> jiajoj jj^ajc. ^g_lc- l_JI*JI i j </thead> 

tLua. 4<td> (j-a Sf -lJ <th> £-jj]| (j^s UvLa. <_Jj.laJI o.laC.1 (jjjljc. Ajjl^j 
<th> (jl (jja. table data cjtjlij 4 _ s .«j <td> (jl 1-u.oVI 

.table heading jljjc. 

j <tbody> al.^jtfbailj ajaikll li& Ludjj :Table Body oua. aaIsIo ~ Y 

(jl Loj j <tr> ^I^jjoiL Liij ^gjll j cjljLiJI jjlm ^gJc. c5j^ j “^/tbody> 

.<td> ^ajjoi_j]| ^al^iJlujlj I uiYl L^jLiJI (jU dlLa^la-a (_£j2kj 

j <tfOOt> (jj a .11^11 al^aJiuilj ajaikll I^A f niU iTabl© FOOt Jj-lsJI (Jjj <sJaia — V" 

j <jjI^j ^g-ajojj jjjj <tr></tr> jiaij ^^ajc. ^gJc. t_ilL*JI i_$j^ j < -/tfoot> 

.<th> £-_^j]l (j^s ^gi Jj-laJI o.laC.1 (jc. CllL^aala 4jjlgj 

^g.xjoij jjJJ jjl^iaJI 4 -jL£j <_jj.laJI jjl^ic. i sLiaJ iCaptlOn (JijA^JI jjl^ic. ~i 

Jj^JI (jlalia ^JWI Jlill ^Lbjj t</caption> j <caption> 



oY 



HTML <■ . jj£aa!I i.'i'\.'.iJ 











Jll. HTML Jjja. f . Lift Jli» : n JSAlt 

JjLII J ^.liJraLa ^2 j Lu nLf I j)l La£ i <_jj-laJI ^^Jc.1 ^La] j)l^j*JI jjli -laaLL] La£ 

• bold (_paJ jC. Jaaj jg.la 1 

AJsjbuiJl jaC- 

ALLa. JlLa <JLaJ 4_ij_ai!lj3 Lja-jl UaJjoij j bl-Laa. j)l£ 4_aiaLa]l Ijiill ^2 <jJaj_)*jj_ul aJ La Aj-j&aJl 

(jc. ILLa j)£J j Lin in j-al jja-aaLf I (j-a A£.j-aa-aJ j (jj-ljauij Vj-la. (jli ejjuoll ojjjli 
AjjLoiLa jia jojVI V J c?^»Laa.LM AjjluiLa ITylaJI IgjS QjSj V j^LlI CllVLaJI (jc ILLa c?-lic.LM 

j rowspan yj^jL-alj]! ^c. <ia-all cijV^Lau]l sLa ^Ic. HTML <. . naa c?LLLaJI .i-ic. 

.colspan 

La^JI ^ioL j <th> J\ <td> IAL\\ ajU ^-a colspan j rowspan j\\ < ,:Vn,n 

CIlAj jl (jnjl-s ^a-a-aj Ig-Ix.-aift 4_iiaJI ^a-a. (j^s jjjtli . • T jl Y jl ^ 4_Laiij “LajS 

.4_ilaJI ^-lijjL ^fLaJilS COlSpan Lai c4_ilaJI ^_yaj3U ( ->La.Ti TOWSpan (jl Clua. t^cJI .. £jjl jl 


00 


ijliall JjJjoi (jJc. A-illlll o^iiilJI ^aLLoJ 


<html> 


<head> 

<title>-kL->-aL_) j-yc J j a_> «■ L(i 3 1 ls _L; J L2L_o</title> 

</head> 

<body dir="rtl"> 

<table border="l" width="100%"> 

<tbody> 

<tr> 

<td>(_> l_L$_J I p^jl</td> 

<td> p_Lx_> jQuery 4_L>_2jo 'i V • l= ^J</td> 

<td rowspan="3"> 

<img src=" jQueryl20 .png"> 

</ td> 

</ tr> 

<tr> 

<tdXi_ 1 j_a_i I </td> 

<td>2— 1 L*z) j l_Lj*_o</td> 

</ tr> 

<tr> 

<td>j I I 4_LxJ</td> 

<td>2010</td> 

</ tr> 

<tr> 

<td colspan="3"> 

jQuery bg_L$_o ^ uLojJ-x-o ._> I_L£_J I 


I J_a> 





</td> 
</ tr> 

</ tbody> 

</ table> 

</body> 

</html> 


■2->! 


I J J 


-kuiLJ 0 JjLuL-J 


l^lsLal Ig-jdajC. -lie. AiaLoill ajSjjJuJI j-lii 


‘ Iosif jfC Jjx» eLliij jls Jlio - Windows Int ernet Explore 

| !£ij C:\Users\Mukhtar\Documents\My Web Sites\default. ' r I '*'T I X I if) Google 


^ Favorites SQL Injection and Cross-Si... 1000 Popular jQuery Plugi... | j^aJI yz* 1L V LS 4nEL» 

© k*i jsc olilj jJc JOo ^ ’ 0 ’ S # ’ Page-' Safety’ Tools’ <|> M 


4 ^ 120 ^ 



“-Ma 120 j Query b*. 


-iu£il ; 


2010 




*1! 


alj j r-i. . ' .-i jSJL, |Queiy - ztj'uajlxi wjUSJl 'ax ?aL 


]*• Computer | Protected Mode: Off 


• j ’ «1125% 


colspan j rowspan (jjjiiajjll j»laiiJj iaiu jjc. Jjaa. a Uijj J&. Jli» : T Y J12JI 
l^-la laLLi. ClaLLr (_ s ^ c - JjLM jiajuJI j^Iajoj bjtajl (jjSla Jj-laJI (j U <_£jj Lai 

(jas jaixLM jJajoJI 111 rOWSp3n = "3 b-ia»J La ILa) ‘Lst-aiabx-a j Lu III “LiLLi £-liajlj 

4-liaj La ILa j) AjL-alibs-a bjLLill o.laC.1 (_yajxj oA^.lj 4_aiix. ^^Ic. (jjjbxjS Jj-laJI 


oV 




j cjVI UuJalj colspan j rowspan ^Li^U J ^1 t ("colspan="3 

jjji!n Ij-ajL (jl ^>fra-nall j ^..La jJjC-li A-lualb ajjj^all ^ > >iTi ^1 (jjill ^IsCj^aV A.u .nib 
Jj-aUJl JjiSI \j^L j jjjUl Jliall colspan j rowspan jiiw.1 jll ^ ijj£iall ^SJI 

. (jlal La£ (_JjCoSl jj j. .-i'i (_Jj£jCli ^3 j^jj£ 3c.l_un l.l£3 LillLiJI ^Lan^l ^3 

. (JjA^JI HTML _jj^Lc. ^j-o ^jJaj Ail ^jl <. ^iia 

Forms ^jUill 

l^jJajC. Anju ^.Vs’im.all ^j-a Inputs I JUi^V HTML Ail ^ Forms ^ALcJI ^.ijcLci 

<form> (jiajjjll ^Llslb..ulj ^ALalll (■ LLlij ^jj iLgnlc. A.'n».,a <iJljt-a CllLiLaxj ^Inill jl L^n/pli jl 
dllxjj-a (JiLa <input> (JL^cjM Jj^alj C. ^j-a Ac-j^-a La^JJJ (jLjanm (jlilJI </fOriTI> j 

^IjiSI j buttons jljjjVl j check boxes jbikVI j^Lc. j text boxes ^ j^iil 

.£ll ..select lists AJ^iall 

j action a.Aa^iI^3I ^a j^AjVI (jj'j > uLml (jnq.^-il^j < 'form> ^c^^nll AjIcj Aijjj ^jj 

<-_iLall (jj£j j ^Cj^nll ^3 <l^..lall CllLjLnll A^lLanaj ^jflAui ^All ^.-^a^ll t_alall ^juiI 

J PHP Jia Server Side jsjj^I nijL (jA 4^-a_)JI CnLxl (_£ 3^L LijjS-a ^^in^jll 
t|i_lLi£ll |jiA (jUaj ^jLk ^SjJjnll (ja <^-a_)JI ^cll .. jl JSP jl ASP.NET 

a ftLall ^1 CllLjLnll JLnjI AiljAa ^nll J method AAj-aljll ^$3 Ajjlnll AL-raljll Lai 

Ijylajjla (_£3 ^Lj HjLoj jj£.iall 

^3 (jljjjtll JajjCu ^3 CllLjLnll (_JLnjl Clna. Qet Aiijlall ^A ^jVI Aiijlall — \ 

^gJLill -lall^H jii jl tA^ns/^-LiAa ^ IjJjl JSdj ^^g^-a^jll < kLall ^sjoiI Can ^jlajxjLumll 

I JLlall (Jjjm 


o A 





http://www.site.com/file. php?name=Mukhtar&age=23&job=ComputerEngin 


eer 

http://www.site.com/file.php ja < 1UJI ® 1a <■ «Ut jla US 

job = ComputerEngineer j age = 23 j name = Mukhtar 

jAlla ClAjlUl JUjjI t-lua. pOSt AijjJaJI AjjIjJI AijjJaJI — Y 

.(HTTP (■ - Ala IgJUujI |SJJ <aaUJI ^3^ JaJ^jui 

dlUllall <aJL*-a ■‘UajS (j] j Jafl3 ^iU2l f. Uuj 4-jijSj — Ua Uil Uj 

.^oUill f.lij t _ s Jc- j method ^jc. U (JaUj (jVI lUjlS-aJU 

j Alill-lj (jjj ‘U-j-a'N.-a < 'fOnTI> £.Uijl -1*J 

■=UuaS UjoU ^Jj3 jSjalU JUU Jj^aic. J£ -Ijjjj 1 a UlL j <inpLlt> |Sjajj]| ^U.-CUlj 

JjAaJI j type ^>fc. JU.^Vi j^aic- j c id j name na^^ai^l! 

: IfrLa (JS <fUl U J AjUtAll 







(c a l m JLcjl) jj 


submit 


Q * aj (Jli.il £Jj« tGXt 

<input> J*eu>u i^aUJl type Ai^aljU 4ita->il juiil : T JjJaJI 

^ajjuall (_ s Jl - a £jtj j a.Vtex j ojjiiS CjLajl*»a]| dl] CllAj (jj (jjlii V 


<html> 


<head> 


<title> 


Jo_LjiL_) g- i yo J «• LolJ I LS _ Ls J l_> 0 


</ title> 


</head> 


<body dir="rtl"> 


<form method="get" action="file ,php"> 

; I 

<input type="text" name="nameText" id="nameText" /> 
<br/> 


: j j j-oJ I «LoJi_£ 

<input type="password" name="pass" id="pass" /> 
<br/> 

<input type=" submit" name="okButton" id="okButton" 
value=" JJ I j_o" /> 

</ f orm> 

</body> 

</html> 





:^gijLi£ dlli Lull (jjaa, j J b_Uj]| ^^3 Igx-jajC- ^jc. j^ij ^^ill 



^ jjaj f Luu] ^ic> Jli® : T V (j£»uuJ! 

Jjj^aljc. ^jx (_£ji.l ^.jx^x j_]xxll] liA li^.ijxj jJjJ-a'l-1 lie..} cdulj lx£ In 1 j jJ £-jj_jajx]l lima. 

lAJlill ajqj juall jiajl t<Jjaii]l (Jjjm ^Ic. (Jla-iVI 


<html> 

<head> 

<title>'1j_LJ j_Lc I «• LiL_il ls _Lc J l_ t_o</title> 

</head> 

<body dir="rtl"> 

<form method="get" action="f ile . php"> 

: I <input type="text" name="nameText" 

id=" name Text" /> 

<br/> 

: j j j _0 1 1 cinput type="password" name="pass 

id="pass" /> 

<br/> 


1 1 



: l cinput type="file" name="pic" 

id="pic"> 

<br/> 

<input type="reset" name=" resBtn" id="resBtn" 
value=" 5 j LsJLxo I " /> 

<input type="submit" name="okButton" id="okButton" 
value=" l >il j_o" /> 

</ f orm> 

</body> 

</html> 

^3 AiLaJI j-ljj 



(Jolfij asp! f Luul : T t 

? checkbox j radio J-f^\ jj^saLic. jjC. liLa j .. 


^Jc. Ajju ^oLull a^A JIaxjjojI ^ t lima. 


(radio 


<L<ua»^a dlljl^.1 a-lc. ^ya JaS3 jl n~slj lilli j -Ha-a 


^jj j (checkbox jx^hc, <Jla. Cy* jLuib ls^ 2- 


IV 




ijjiSjl JiLaLs ^J-a> f.llac.1 AJa_^la £-a AiLuill AiljAa]| ^jjiS jj ojlA 

(_jllLa]| JlA Ini'll cVallJ6 <ii^a|jlS A.flll-’k.a LajS j 1131710 l^isli 4„a)a.H JIjjjoJI 





</ f orm> 

</body> 

</html> 

^3 j3jj j 



radio j checkbox Jli» : T« Jlill 

JU. ^k a.Vs’nin j i-lua. jj-a T3CliO 4 _jLaui (JgJflali] (_gja.l Aijjla dJliA 

^)JC- 4_q}'4n'] ^aJJ J ‘U.lajjjx.SI 4-ajls]l ^)jL-alC- j ^(_]H)ui\\ <La!ia-a ajJF <jja.l) 'ijuS, JjIaj 3jaj 

-lai -li-laj ajj j <OptiOn> ajujj]l <_£}La. i^ya Ifljjflaj pjjS 4-ajlill ^j^alic. lil <S6l©Ct> pjujj]l 

c4jjI3j ajoij ^k S6l©Ct6d = ' S6l©Ctsd Jjjjla CF <_ s - j da|>^ jLiaS ^j^aliadl a3A 

Jllall 3Al^ 


<html> 

<head> 

<title>select p l I ls _Lc J l_ L_o</title> 

</head> 

<body dir="rtl"> 


1£ 




<form method="post" action=" f ile . php"> 

<p> T o j 1 (j I a_L_i_J I tj i u-^°</ P> 

<select name="nationality"> 

<option selected=" selected"> L_j j jjd</ option> 

<option>(J I j_s_J I </ option> 

<option>j l_Lj_J</option> 

<option> ( 3_>Jxudi_9</ option> 

<option>(j ^ jSl I </ option> 

<option>o j_*L<cJ I </ option> 

<option>j_j I jj*_) I </ option> 

</ select> 

</ f orm> 

</body> 

</html> 

(j* j 


SGiGCt *'fr JlILa ! Y 1 

10 




; select oJc Jlio - Windows Internet Expl...l| 

W*"t I X H ij) Google 


\m C:\Users\Mukhtai 
★ Favorites 


1 m select J vxV«J ssdc. Jlio 


^ SQL Injection and Cross-Si... 

n | & - a - 


i%i Computer | Protected Mode: Off 




j <textarea> j& j li& ^iLislxal j-^.'ic- 

4-oj 3 JLi^y j tsxt (j-a <input> i_y&£- ^^Ic. J-laj-uVI oJliiJ-a 4_u^aj 

. ^lajoJI o-ll^j 4 _Ll^j 


J <jJa JC. -ll-l^-l] TOWS j cols JJC. 


<textarea> jj-*-; 

ajfl.u'.all jlajl t4x-lijjl 



I^iiLaS ^_pajx!Lui^s ^3 Aj^jja.'uAi' -lie. j-lii j 




textarea Jlio - Windows Internet Explorer 



| C:\Users\Mukhtai I +■+ Google 



^ Favorites \ SQL Injection and Cross-Si- 
s' i textarea .jJe Jllo *-y ^ ' 




ad J 5 '• ''' wu^l 





textarea Jli» : T v JLil! 

till g-j^a-a JLajV' j^aUc- ^luiAj 

jUal ^3 l^-ia £^dajj ^LoiSl ojajSJI ^oLaill jjusalic. p.lm3J 

(jlilll </fieldset> j <fieldset> fl^kluL HTML ajijj L I^a j JTn^ 

JJC. ^.^..U-SajJ ■Lc.j-a ^-0 <_]£ .lljjj aJJ J JLi.^1 ^j^alic. 4£.j-a^-a LafrilJ jjbj^nn 

CllLojiat-all 4 jaLs ^^Jc. <_J.ll Liljjc. ^jualic. qa j— a’lC. <_]£ ^la LaS t^ISQSnd^ 

for <ii-salj |ajail jJj-allJ <l3b©l> Jjjjla (jC. 4_}3 <I^.JLaJ! 

JliLall AAUij Ijc.^ C<l3b©l> j-L^a.lJLJ 

<html> 

<head> 

<title> 

fieldset pi I l 5 _Lc J I 5 o 

</ title> 

</head> 


iv 



<body dir="rtl"> 

<form method="get" action=""> 


<fieldset> 

<legend> iU I <3 l_j 1 1 </ legend> 

<label for="nameTXT">p-u)*i! l</label> 

cinput type="text" name="nameTXT" id="nameTXT 
maxlength="50" /> 

<br/Xbr/> 

<label for="ageTXT">j_*us_i I </label> 


<input type="text" name="ageTXT" id="ageTXT" 


maxlength="2 " /> 


</ fieldset> 


<br/> 


<fieldset> 


<legend>J-*us_i I <3 I j L$_«</ legend> 


<input type="checkbox" name="prog" value="cs" 


VB.NET 


<input type="checkbox" name="prog" value="vb" 


<input type="checkbox" name="prog" value="fs" 


C++. NET 


Cinput type="checkbox" name="prog" value="cpp 




</ fieldset> 

<fieldset> 

<input type="submit" value=" J dj I " /> 

</ fieldset> 


</ f orm> 
</body> 
</html> 


: ^gJLLaS 4iLaJI j.iij 



fieldSet ^l.^Vual ^ic- JliLa : T A 


Frames ^UaVI 


■la-U 






J ‘L 


I dll 






dl^L^a 




HTML <ii d] 


^«mi 




.Frames dljlLVI 



al-lalluiU 4-ljla. frLijU t ^^ic. ^ CllljUaVI (JLutJjgjI ^aJJ 

(_]S a 2 i.ljjaj aagaJI j i 1 ^-U-a.Jaj Vn > h dj^jlLVI -i-iC- AjI^j .i-laj (_£iJ! j < 'fr 3 ITI 6 S 6 t> 

4_jjUlll Iasi 44_1 _j1a]I <AjouJIj jl (_Jjui£j]Ij ~s \l ilAaj aJJ j C^gJSJI a3>a. QA jllal 

^■^JUgiU J <fr 3 IT 16 S 6 t> jj^ajxU 4jlg-i]| J ^ajaj (jjj djjjUaVI <sLial l^_i3 ^liS 

Jlllull - 1 A Lugj] i src 4 . 4 jgaijl] _jUaV I l^J^a^Iui 4 ^iigaJI jLuias .lllgjl j aj-u_j]l 

^L^aaJlj J ^.a-Sk ^jas % V * ajSs ^a-^-a-J <_JjVI (jujUal ~ 1 '***' S-Hi 

I^-Tki.gaSI (jga 


<html> 


<frameset cols="30% , *"> 


<frame src="page l.htm" 

/> 

<frame src="page 2.htm" 

/> 

</ frameset> 


</html> 



I^JLlLaS i^yajxhxAA lift j-lil 


'i i C:\Users\Mukhtar\Desktop\1 

1rstPage.html - Windows Internet Explorer ■= ® 


0 C:\Users\Mukhtar ▼ *t X ("j C! Google fi w | 

Favorites ^ 0 SQL Injection and Cross-Si... 1000 Popular jQuery Plugi... 

^ C:\Users\Mukhtar\Deskto. 

l-I' ▼ Q ▼ f3 rpjn ▼ Page ▼ Safety ▼ Tools ▼ 


Hi!, I anipagel 

1 

Hi!, I am page2 

Dor 1 % Computer | Protected Mode: Off ^ia 1 w ^ 125% ▼ 



(_5 43 -a& (J&mu Lli^UaVi fhVual ! Y ^ 




.<body> ( Jc. V CjljUa^/1 JaaiLajj ^jll a ^ tl ~ ^ Iaj^. 

jAlla]| j LaJuj <_Jj^ala]l JaaJI jjjja (jC- dlljUaVI ^a-Sk. jni'n ^A-s’im.all aJL (jl (JJaj 

A^Lial (jjja (jC. Cll|jUaJJ JJmll lAA platAI (jS-aJ c(Y H (_]£,j.'j]l Jajl^ (JjjLoJI (_J£jlu]I 

.<frame> Jl noresize=''noresize" 4i^lJI 
^ajuJI £-a cols AAA-alJI (JLaaAjail J IaJ j (_gAj^i C. <_J£jAa Cj)Ua^ I ClljlS (JjjLaJI JULall 

A^a-alJlj COlS A^a-alJI JIAiLojI Jja (jC. jjsl (J uii CllljLla'J J C < 'frarTISSSt> 

IC-aJI (Ja_)j ilLuia JjLa£ Ax^Aj^all ^jJU^Aj cfOWS 



yiai Jii AiljUaVI jklailu,! : T . JLAJI 

Aj^alaJI target Aik-alj Jl jUaVI jaaal aIaJ jjja jC- jj*-a jalal ^_9 aljia-a ^_yajyu JajJI (Jjta. ^J-aJ lajjj 

.(Links aJxJaII JaaljJI ‘Jas Jajl^ <a> JajJL 

jpa AX-j-a.^k-a uJaA J A-,~k.ia-a jjLaA^JjoiJ < 'fraiT16^ j <frarT10S0t> (jAAjaJI (jl (jAa. 

J xjjj Aa^ jjiajJalJ <iframe> ^jjJI JJ HTML AjJ (jli JljUal ^J Jais c_ il^-L^I 


v\ 


4Juj_ea3lj <iframe> ^La_JI ^.'iViui) j ^ji^a 4_uj ^ (jjjjliia USiij 

:2ultill 

<iframe src="URL"></if rame> 

JjjjJa (jC. jUajM laJ. > Ri (j£xJ J c l^jj^uJaj ~~j ■ ■< ^Jl ^L^ii-sall jLuia jA URL (jl Ulja. 

.4jj1o 3I 4juiu]L J lUIJL width j height jsiL^l jll 

LUiluia CllljUaVI (jl La£ cdlljUaVI ^C.Si V CllLdajjtluia dlliA (jl liA a t-_ la-j La 

. ^jJamV I oJa <jll£ (_jJj l.^.-aC- Jj ClJjj La CllLiaja.lLaxSI (j>i» j (jl (jx ^j^l ( _ 5 Jc- t AjLUI (j-a 


Meta Jl j^aUc- 


(jjj <^Aj^all (J-“lj *^Jaj-a ^3 > aLlaJ “LLj-a jjC. ^j^alic. iJliA (jl Jj^aiSI IJa 4_iI.1j CjjSL 

Ig-jJajC- j cillakAj^a i a.i.i-^n'.'i (J^l (j-a dlajll ClllSj^-a Ig^a-laJlmJ </head> j <head> ^-ajjj 


(Jat^ (jl£-aj 4-LaAjM (j-a3 ^-lUL j dTieta Jl ^A jj^aljjJI sLa j cdlajJI 0 jljj (j^uda 

Jj| (jjxjslill jljj ^-dajt-a jwiR'l V (_^£ ^ J*s j. .-i JSiaJ cJLikJj^a (_ Au^aJ dla-JI ClllS_)^-a 

. dl^JI ClllSj^-a a ^.1 lt~. La Cliaj 4.;LaC- 


content ■« j name ^1 ^jj-aiL j meta ^jJI JLLi. (j^ meta Jl ^^aLc. ^jj 
ul^JI LaA t_uj (_^l meta (_gj>.vir- ^»aI <_1*J j t<l (jnL.^ilj£ meta Jl j*J 
r^LaS (jLa^kluu (jl JJJI j ^description j keywords (j^VI (jXa^j <jlil]l 

<html> 

<head> 

<meta name=" keywords" content="xhtml website test 
meta head"/> 

<meta name="description" content="this page 
demonstrates how to use meta elements" /> 







(jlaj ^j-a ^-a-s-a Keywords ji Meta Jl 


L^J*^ 


C. Lai i aJlia-L-*a o3^2kj^JI j ^_paja.'L^II jyuJa lA3^.l (jc. (jjp-s n > a jy^s-liJlui^JI (jl 

. c^lLskAj^a A-a-iii (_£3]| (_gjp*s .all (jc. i L^j a Description ^Vl jJ Meta 


Meta Jl ^ji^aljc. (jjjl^a 3aLJl1 (jl £3jjj V t_JJ_j]| (_paja.'~Uax ^3 A^ij^aJI a3A (_paj£- 31c. ^.J-a.IL 
. cdLa-L-^a (j-aj^a o3j2aj-aJI CllljLiJI j) C. CllLjLiJ |»j3sj jA tils LaS ^)j^alj*JI o3A 4-a^-aS IjAlla 


l-iIc-L HTML AjtJ 4_Lo9lia — ^li I Jjjaaj - Lufrjl 33 uj^ Meta Jl ^j^lic. (jc. LiL-ia. a.lgjjL j 
^jojIj i— S_)* j ^ill J Ajjj^aaJI HTML (_pa|_) 3 iLjajl A-JlL]l dlLskJj^all ^3 ^jl'Lua j i l^-a^jojj 
(jVI Lai cXHTML j < — -Sj*-; La jl Ajtluj-a]| HTML AJeJ l _j^3jx^±uiiui tillJ <_Jjs j l HTML5 
.J^LaJI Aic. Ltjjjj Lt^)-a (jjSJ ajaJSJI HTML Vj-^. l£L)^ 


vr 





HTML Job 





<! — ... — > 

(XHTML (_pajc- -lie. 4ic- Clu^aJI .Vnmioil £-jj ■li-’la.lS 

<!DOCTYPE> 

^ju21 i aj]j 

<a> 

i lSj-a (_gj 'll ^ilaj-a-al jL^aji.1 

<abbr> 

(_gj 'll ^Alaj^a-aJ jL^aji.1 

<acronym> 

4Aflj^all tiULu JL-ajl CllLa^lx-is AiljJal 

<address> 

4-2kjj^aSI Applst (_3±lLij 

<applet> 

QAiSa A.aJ-a'lx <— SJjJij 

<area /> 

O^f- (_ 

<b> 

-Lajlj^l C1 j]_)LuiaI AjjJaljjal <J.ilj t—SJjxJ 

<base /> 

<.-Sk.L^i\\ Ir\ 

<basefont /> 

aL^jl 

<bdo> 

~ *V- *V- \1 ^ ^ ^ ^ 

<big> 

(_Jj_jla ^jjjlilsl 

<blockqoute> 

4 ■%. Q . 

<body> 

-ii-ii. j L , o 

<br /> 

JUJ jj 

<button> 

(Jj-lsJI (jljjc. 

<caption> 


<center> 

JajaijlLa (jjjliisl 

<cite> 

o^Lllu 

<code> 

Jj-laJI a-laC-V <£j!Ll-a ClllL-ialj 

<col /> 

Ig-ilc. ASjXLkLa CllUi^alj (jjjJadl o-laC-l qa A£.ja^a <—Lijxj 

<colgroup> 


V £ 









<fieldset> JUJyi 

<legeng> 

4-ajtall 

<li> 

^3 4jV' o»“n«l .1^.1 li*-a j .a 1 l .) j^.1 .Vl*nn.al .Vi* mail JaJj 

Oink /> 

Ajjjj^ a 4_laJji. i— SJ_)*j 

<map> 


<menu> 

.Vnmiall (_£ jia-a Ax&Ls qC. cllliLu 

<meta /> 

CllljUaVI ^C-Sj V t _gA]l dlLiJaj»'lni.all ^jk jUaVI (JjAj eLui jV 

<noframes> 

CIujSjjJI ^c.3j V C-lLjaja'u^il ^ CIijjSjjJI (_gji-y ol <_Jj.li jlAojV 

<noscript> 


<object> 

4-ajls 

<ol> 

AJjLuiLaJI 4-ajlsJI dlljbi. 1 iq J-i'i.a CllljLl^JI qa Ax. j-a^-a 

<optgroup> 

AJiuila 4-ajli ^3 jLl^. 

<option> 

(J-aA 

<p> 

jjjlSU JaAmj 

<param /> 

lajjaix Jjjjiia ^_^oj 

<pre> 

jJj^aS jjjlilsl 

<q> 

i_JjJ-n*»'u\ 

<s> 

a^ajjxl 

<samp> 

(LlSIc. jQuery J Java Script) duj^ 

<script> 

AJ.Lbii'ba 4-ajls 

<select> 

y{x,*s-i 

<small> 

(JA j ^jai3 (. SJ^Jxj 

<span> 

t—J^IajuLa 

<strike> 


<strong> 

^(Jjj-aaiAJLl ^3 ^jislii) JaLajl Aijjj t_LiJxj 

<style> 


VI 






vv 





XHTML 


(j> i» jll) 4 AjISJI HTML ^ *i»* ^^lll j ©Xtensible HTML J jL-alil ^a XHTML <j) 

i^ya V J 4_i^.li (j-a <J .Ilia'll I HTML (jC. i allai 1 V ^A j i (4jtlu^all HTML IAjC.Jj 

HTML Clll Alima <Lllj£l “Laj^a j!i£l jJjl*-a IAjLuC. 1 (jS-aJ AJaLoill (j£l j i CillL-oljH 4-l^.li 
tir k*j La I La j ((extensible Markup Language) XML ajJ ^IjS j 

^ic. XHTML ^yjlx-aj ^IjllVI Jai La£ (t—iijll ciiLjajxilui^ ^-a ^£1 <jaslj!i 
L_lljll ^jA3jx'\i.^A ^ L)^j^a^-a t _ s AlJ (jl — (_Llj a^iS - bjlfiail Aljl V ^flalll j (J-axll ^3 ^)l£l 

aj-ut.j.^a.11 oj^^VL jl AjSLII < sjlj^Jli 4j-aaliJI L_li_jll CjLdaj*Ljuia (j^aliJI 

La ILa CilLjaja.'uax <_]£ ^Jc. La£ Lula^L^a j.1lu.u <_Ja l Liuiail JLuiil j (_gjiVI 

.<ic. ^UVI XHTML 
• • « 

diL^Lusall a JA ^j-a ojii£ Ajjoii <La!iS i_lijll CilLskjj^a Cll^jLiLa (_£j^J CllijiiVI 4£jTu (jl (ji^. (_ s Ls 

IjJtLall (Jjnu (_ s Lc- (_gLjLa 4.1uU — l LuVU — a.(_gAj <LljJ^a 

<hTml> 

<heaD> 

<title> 4 _L_oj HTML ij^_Lz></title> 

<BODY> 

<hl>Bad HTML 
<p>This is a paragraph 
</boDy> 

<j^aj3 ^Al jpajj (jl (_5^li!ic.L Lg_i\ V) CilLdaja.La^all (_paxj ^Ic. (jxutlui sLic.1 ajiliull (jl £-a 

Ig-jlC- JIL (jl (jS-aJ La (JiJaSl j HTML A_lLiSj 4i_)Jt-a ^^AaI (jJifLtj V Ig-jV ^als (j-al <_]. aC. 

.oLic-l <ia.w-illL dllajjL^a jLLiil (j-a AaJl XHTML Cll^Ja AS J (£(_£Aj JSjJil 4jj!iS-a l^jl 


VA 





XHTML 


■llima i_$\ 4_jIu£ jua. Ig-llllaJ ^aJJ jj La ^jill <Ja.ua til ^C-ljflll j<s <£jaaa ^3 XHTML ^naaLj 
<£tj-aa-a ^3 XHTML -iC.|j3 (j.oj's Vi j-lLtiul j tXHTML .Vnma Alluiall .i*.u.u3 HTML 

: AjJIjII ^jL^ajll 

■s^y ' 

.Lower Case l_u£I • 

.^Lill |»jjuj £-a jjlallla jLlc-YI ^>jjuj t_UJjj jj^L * 

.(jalilsl CuLaLlc. jjj Clllij^aljil a.VnLall ^uill £j^a • 

.<head> j <body> j <html> j* J\ jc. jiiui V • 

. (‘LILlII o^flill (_pajJL.n.u^ lull's 3 >^i 4-ll.iJ ,^3 DOCTYPE ^iLoiall £-jj i fljjatj • 


<!DOCTYPE> Jilluull lLjxj 

^gic. lg..ba jJa.u (_Jjl jjaj j' 1 . '7~ J U-UjII CllLuijLaa (_J£ jl ^^Ac. XHTML jjjlaua (_juajj 
Document Type .m^ll ^ ^JAI j <!DOCTYPE> ^j^lII jJau 

<Jjtaj-aS j J-mill ILa uuijll ciiLuajxjjaia (jl tiUL j t I DTD jl Definition 

XITlInS <jjL^aljJI lg-al.laJlul ( ^JI <sLjal t4.a4j^all ^3 ^ajjujll ^IjjL? J 4ulu^JI <*_u-al 4u.iC.lj3 
.4 a4.^a.l' Name Space pLajul pLuaS i L^aJ ^jill J ^html^ 4_il.lill ^jujJ 4j^alaJI 

j XHTML dlLuiiua U-lIc- I ^3 4-3-il i uu (_jLII .~hnn.aH £-jj U-ijjtj j^-a’ic. 4 -i!Ij]| ojajuall (juajxls 

|»l*JI (_]£alll j n .o i l.igj j cXmlnS 4.9j.-aljll <sLual (ja jJoju <_]jl£ 4uuSli jl l_tau (_gLII 

I^laS XHTML ^iLual 


.djUa \.a (JfLuj ^Jc. AJLLuaI! ^3 lix-a ^ya 23 (jl£ <j-a ej£j| f TlJ * *1 La L_lic.l 


vn 




< ! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http : //www . w3 . org/TR/xhtmll/DTD/xhtmll-transitional . dtd"> 

<html xmlns="http: //www.w3 . org/1999/xhtml"> 

<head> L_La> l ^ I j t 5 jJLj^_o</head> 

<body> I La l & jdL^-o</body> 

</html> 

Transitional j 'Tun .all ^-l^jl . 1^.1 oYx.1 < »!DOCTYPE> j/'m. j 

^-J^jYI (Jjjj j 4-Lj <— sYbi.' V I j 


lUXAbdl t J d ‘ Lojj J <il]l LftAUJ <!DOCTYPE> - 4 d \ ^ 


Xlu 


L«IS ^ aU 


^IjjYI j ,Vnm.all 4.a.ll-s.,a £-l_^jl 4j«jjI dlliA XHTML 


:XHTML 1.0 Strict .1 


j <basefont> j <appl 0 t> Ijc- HTML I^a 

j <menu> j <isindex> j <iframe> j <font> j <dir> j <center> 
cj^IL] pjill Ija ^ol: Y j c<u> j <strike> j <s> j <noframes> 

:^a ^-^ill I^a i^ja .Vnmoll < j c^frarnssst^ 

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

"http : / /www . w3 . org/TR/ xhtml 1/ DTD/ xhtml 1 -strict . dtd"> 

:XHTML 1.0 Tansitional . Y 

dljjllal ^1, Vs “nab AijLuiS Y AjSJ j HTML ^ ,i-a/s £^jjll I^A 

: ja IbA ijji i ^lajai j t <frameset> 







< ! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 
Transitional/ /EN" "http : / /www . w3 . org/TR/ xhtml 1 /DTD /xhtml 1- 
transitional . dtd"> 


:XHTML 1.0 Frameset .r 


I LA 


O* 


■ I'IjjiaJ 


I SJJJtj jl-mi j cdl^UaVI ^<1111 j HTML 


! 3 A 


<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset/ /EN" 
"http : / /www . w3 . org/TR/ xhtml 1 /DTD/xhtml 1-frameset . dtd"> 


:XHTML 1.1 .£ 


Ruby Aj^alA. ajj ciiliLdal dl] ajSJ j Strict £-jill JjLaJ 

:^a ^-^ill lliA aHuiaII i sjjjti 3 aja] j 4 ( 3 c - 

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

"http: / /www.w3 . org/TR/xhtmlll/DTD/xhtmlll . dtd"> 

XHTML (j- 4 (j£^l 

(j.a.jt.1) (jt ^ajJC. j) t_u_jll ^ JjTVillj XHTML ^jc. tLuiaJI 

:Jaj|^)ll XHTML jjjla-al L« t_ijj 


http://www.w3schools.com/xhtml/default.asp 








HTML 5 


U A-uStll JaLojjVI AiLoAl dilaAi^all l&li^jCu ^^gltl HTML AiJ ci^Ja 

Ala ^>jg.4a t _ s Ac- CllLa^ dllj^iaj (jU <ajaaJI j H “t H ^Ix. ^3 ^HTML 4*01 
J jaIaJI La£ (Web 2*0 AL LaJ £-aaaj lii_lj^al J dAA liajj yJ^AI lillA 

uillj jj L j clljj-all j jjAjAJI (JjjtCuJ JAa dlLaAa. |»Aaj V (aA-laAl ^^Ac.1) l_Uj Ail 


j ajau^ll ^ja aAjA^. Ax. ja'N.a AsLjaL HTML 4 Jl] ^ja AjA^. ^)l*U ^t\ ‘ , ' 11 ' La lAA j 


.HTML 5 ^VL aja=JI Ja^VI A^aSII Ailll J\ dli^l 


j jjAliJI ^_yajxl HTML 5 a. 1 CllpL^. ^gj]| SAjA^AI ClTyatl ^ja j 

AsLCal AiLCal ^ja_)A] 4-Laali. j ! jl CllVlLall AjLiSJ 4a*ali. ^jaj J Cl l^j^saJI 

ClAjaitl ^3 (jJajx-L^i Laa i^ltA ^)JC. j ^LLalJLj <a*aliAI (JL^aVI ^>a*alic. qa oAjA^. Ax-ja.-^.a 

.Aadill 


HTML 5 -1 A_o£.I ^1 ljj^I ClilJajJLiwkA 


yji ^Y » » 1 |»lc. lAjJjlsta £jCaj ^gAc. (_Ja*AI Iaj^ 1 lluil Sj-UaaS ajj 3 Ala Caj^Ja HTML 5 (jV 

J£j l^.aC. Ajjgj oAjAiAl CaLCajxiLaall j n a . Ti \ Ig.aC. Aj V <a..)Aa." CllLCajxxaa ^Jaxa 


j (Jialmall ^gi AjjLutall L_Uj]| dllajLaa «. Lu AiA qj£1ui — ,_gJ^)J — HTML 5 -3 cAjSIj 

: CllLCajxxuia q a ojis ^\ Cll^jlAAaa'lM JAa LLatS LagX-Aj dlLCaj»“nua\l ^j>i» ) ClllAj Afi 3 Ia^A 


\Safari j Internet Explorer j Opera j Firefox j Google Chrome 


C_U^]I CljLja^xiL-u-a cHiI^jjjoC. <JAja^)ll AjlIII HTML 5 (J* c_fll£ CljU2a^)x!luiA]l A (jl .vSThm V 

. ^jJAlLaSk-y 1 dljjjjVl ^aAVim^ Ajiij^a A_baij lg ,aTVn>n j 


AY 




Video jjjuill j^lc- 

V«» »• 'S 


<^4j_*a Q^ajJa jj.ll4]| Cl)l4la ^_yajxl ^JajjoU 4_ili HTML 5 p-i4j 
width I j height ^UijVI b J] ^jall jUuAj dlk ^ j t <video> 

3 ] 4-hj 4£ <SOUrce> (jjVl ^)JC- jj.ll4]| C. ala jL^a L>° J ^ 4j-alAj| 

: JliLaJI (_ 5 - 1 c- AJLllI aj.4.u*j.H jiaIAiJ ttype j^c. jjaj 41I t_4Ls j src 

<html> 

<head> 

<title> 

j i J_> a_J I (ji> j_c j^zi_Lc LS _ Ls J l_> 0 

</ title> 

</head> 

<body> 

<video width="320" height="240" controls=" controls "> 

<source src="movie .mp4" type="video/mp4" /> 

! 1 a > a 1 1 oij-c Jjo_Lc px J_j *il L*_l I (jj j-sJLul-oJ I 

</video> 

</body> 

</html> 

(<video> j aJjuII 

I^JjLaS jAiluiS 4-aC.WI dlLdaja.U£i.a.H ^3 Ibl cHTML 5 pC-Jj V (_^i t“l\ 


At 






jslLula j Au Ia£ AjA^JI jjAiiJl <jia ijC- j^aic. : V > JluJI 


i| ^A j jJ-liil! ^ jx^a ^ l^jl Aj^Ij (Jaiu^ ^C.«li <VideO> <jli o^A !A-la^»Lo 

.WebM j Ogg j MPEG4 


:<video> cjUj^alj Jj-iaJI q * =_>*-; 



* '< a aU ^jkU 



muted 

audio 

jj-likll t_kla] pistil (J Ut t'inll 

autoplay 

autoplay 

_jJ-llk]l (Jjt-Aa ^9 1 JaJjjLU ^_pajC- 

controls 

controls 

_^J.llk]l (_Ji_LU-a ^-lijjl 

(JjoiS. llLl <Laj9 

height 

Ajlgjjl Juc. ^jlkJj (J^ >*>ij JJ-likll (JJauaU S Jllc. ) 

loop 

loop 

(JjS j jJ-lik]l ^Jak-a jjc. ajjjt-aJ ^-Ut-uij Jaj^j 

AlJuuHj ^.w"ujix,ll ^kj (j) 

yr“^ -M; 

poster 

1 kLa Jajjj 

yr“^ -M; 

src 

^J-llkil (Jjr Aa (_yajc. 

(JjoiS. lN-1 <-a^a 

width 


<Video> J*ak!l Oli^alj : o JjJaJI 


A£ 



Audio j^«ajg- 


ajatJI i^ja a-li.lkj 4_laLui±j L_lJj]l ^y&jJa Clljj^a]! dlliLa ^_yajC- HTML 5 

:^LLiS jj^iiJI ^_pajc. <^jLius uVini j < '3udio> 

<html> 

<head> 

<title>o I tpj-s j^^Lc ls _Lc J l_L_o</title> 

</head> 

<body> 

<audio controls=" controls "> 

<source src=" song. mp3" type="audio/mp3" /> 

! <3 £ jo —\ I oij-c j-ia-Lc p-c J__) Ut_l I (ja j_s_Lui_<iJ I tdu)!^_J 

</audio> 

</body> 

</html> 

I^A pC-d j OLda^uLouJ I JllLiJI lilA jJuj 



Ja^ (jia j«1ul4 fjk jJjj La£ AUaJI <jia ijC> : T Y JLuJ) 


Ao 





j yJJ jj£.la]| ^g-la-lmS JjL-raiaj| I3& ^aC-Jj V CllLiJajXijji<all ^3 Ual 

AJLojj (_g_p>-i tg'-^ j <audio> 


j Ogg j MP3 ^ x ^31 djlALal ^ ciCIj ^audio^ j ■ 31 4 Ia^. \\ t ^Jj * 4 lAj^. \ ^ 

.Wav 


:<3LldiO> Jj^g.'u.." ClllL^alj (Jj-liJ) f^yajju 


£>2JI 



Clljj^all C. aLo] ^laUI (J lit jauit 

autoplay 

autoplay 

Ciljj^aJI (Jial-a ^3 Jaj^iu cJ^J^ 

controls 

controls 

AjlgJjl Jljx ^jtalj JSjxJ i— l jx.aH t- ala Jjjtiuj o^lc.1 

loop 

loop 

jlaiH 1 <aii^aH (_Jaaaj -3jx <- ftLa.ll (_Jj-aaj 

preload 

preload 

jJ>] ^.Vs’nxi.all jij ^jx j ^Lalll (_Jj*_lxlJI A n.ala. q X 



(Jjiiuii H 



Clljj^aH l iLa Jajlj 

t si -M; 

src 


<video> J* aj«JI Xlixalj : 1 JjJaJI 


Forms ^iU^I ^uaUc- 

^J) AiLiaVL Forms ^iLaillj <j-saliJI (j-a 4x.j-a^-a HTML 5 ^a-isj 

yx linh I-IaIuj j c <input> JLk^VI ja-rajc. (_j-a ij.ij.3a. ^X j-a^a-a 

i^liill JjAaJI ^iill j <input> jj^ajxU ij.ij.3aJI 



type 3jLa)jl) 4_4jj2 

LS jjjj£J'VI AjjJI Jlja^V ^j^ala. ja^a-lC- 

email 

4 1 n xtnll JajljjH J (_>*ala. jx^aic. 

url 

^ISjVI cJla-iV t_>4ala Jj^a.1 C- 

number 


A1 









j tlaLoi ajj l s-i s .a jj^a'lC- 

range 


date 

(klxji/ J^alc- 

month 

<luJI ya ^,yVn>n j ja-^aic. 

week 

“ic-Laj^ jjL^ajc. 

time 

duSjaJij cbajji j ^^1 c. 

^UJI 

datetime 

oil du3j!l]lj cdlSj]! j jj^a'ic. 

datetime-local 

t6Xt AaaIu jA J CiaJI 

search 


color 


HTML 5 JIajVI Uc> : V 


: JllcJI ^Liil 

< ! DOCTYPE HTML> 

<html> 

<body> 

<form action="" method="get"> 

Name : 

<input type="text" name="stdnt name" /><br /> 
E-Mail : 

<input type="email" name="stdnt email" /><br /> 
Website : 

<input type="url" name="stdnt url" /><br /> 
Points : 


AV 

I 






<input type="range" name="points " min="l" 
max="10" /><br /> 

Date : 

<input type="date" name="user_date" /><br /> 
<input type="submit" /> 

</ f orm> 

</body> 

</html> 

^3 ^LlLaS (jjLaill <_jl!la]l jdJJ 



jJjj Ia£ JIajVI j^aUc- :TT JLuJI 

l^La J ^LLaj]l L >® 4£.j-a^-a HTML5 La] AjLda^L 

jj^aLic. 4qjda|jj3l ClljjLi-kS <U.l»-aLa]t a.LajV adalluU (_gL]l j < ~datalist> 

4^jLla j <option> ^Ltij (jjlxallj 4-ajliJI j_gj"l <n L>jj‘u j aJjaL^oSI 
j-L-alx! (<datalist> j-waic.^ AjuJa\jj^\ CllljLliJI <Lajlij ^ajail La£ c<S6l©Ct> 

JliLall JiaLLo] cliSt ailAaJI ^ic. 


AA 




< ! DOCTYPE HTML> 


<html> 

<body> 

<form action="" method="get"> 
name : 

cinput type="text" list="names_list" 

name="stdnt name" /><br /> 

<datalist id="names list"> 


<option 

label="A" 

value="nameA" 

/> 

<option 

label="B" 

value="nameB" 

/> 

<option 

label="C" 

value="nameC" 

/> 


</datalist> 

</ form> 

</body> 

</html> 

c<output> j <keygen> LkJ HTML5 <> 

(jj .a, ’'Vim .all (j ya (_jfl.-x.lH J (Jja-uU dlULaC. ^3 <kSygSn> ^adxJjuU 

^-a (Jjuijj ^yAjaj ij-ac. ^Lii^ ^lsJ) jj _jjc- j Authsnticstion 

- J< ‘"N ' ^AxJjaU J (jj^ 1— lim 

<keygen name="security" /> 

0jtli <_jLa 4..fll'i-xx (j* OljtpUtS dllikjx-a ^adxHuujl < 'OUtpUt> Lai 

i^^LLaS Jsvs Script ^.1 (j-« sLLLall |»jiH jl diULaiaJI 

Coutput id="result" onforminput="resCalc ( ) "></output> 







uanvas ,c - 


^al .iR/lmlj (_j-ajJa ^J\ dlJ £jjj tj'A\ j <Canvas> uc. HTML 5 ^ 

^jic. Flash Jl cjlaL^lS Plugins a^jU. cjULal aJ <>. lilll j v Java Script 

. (JliLnil Jjj.ui 

I^^JjLaS yjAAi-a width f^yajc. j h © j Q ht £• lijjlj Vjl ajjUijl ^aJJ ^uJJ-all j^flAC. A-jt-ljoiV 


<canvas id="myCanvas " width="200" height="100"x/canvas> 


AjLui^ 2^ - . ' Java Script ^al a^jlujIj a_Jc* ^ 


<script type="text/ j avascript"> 


var c=document . getElementByld ( "myCanvas " ) ; 
var cxt=c . getContext ( "2d" ) ; 
ext . fillStyle="#FF0000"; 
ext . fillRect (0,0,150,75); 

</ script> 


jJrXuJI ^3 j 4j ^_paLiJI id Jl Jjjjla (jC- ^ajjJJ-all Jj^sajc. AlAaJJ 


I •. .a 


var c=document . getElementByld ( "myCanvas" ) ; 


: ^^JtllSI jJajoJI ^ 2D aL*jVI ^lij sljlgA j ^ajjjj-21 0bj6Ct (jjl£ a-LJuL liaS 


var cxt=c . getContext ("2d"); 


: JjIs <_Jj 3 a^Uul ^aJ ext (jjl£]| Mathods ?.lc.dluj| ^ajjjjllj ^LiaJJ j ^jVI 


ext. fillStyle="#FF0000"; 
ext . fillRect (0,0,150,75) ; 


^ JjU.Lui ^ J JjUaj ^ Java Script & aydi u\j a x ^ 


s . 









A-ajall La 4-ajjjJ ■ ■< JSjLlll Ijjl ^a^-LM (jjlll -ll.laj ^aJ (JjVI jLirnll ^i3 

JSjJaJ ^gjjjaill (jAjVI J (_£jl*JI Jaa^M 4jj£j dlLul^j JJJ-alj £JJai]| ^ajuJJ ^aJ -L i ^FFQOOO 
. ^4-Jjjj^all o^flS Ajjjj^all 4_laJjiJI Jjlalla -ll.laj -lie. elilaJ Lai <jLL-a 

I^gljLaS L_1J^]I 4-~!>.ajL--a\ ^Aal^ll S^LimoU ^jaia^a (jjLuJI JLlall j.Ail 



'. IfrLa (JS Aa.lloj J |Sjujj-all (jjlS Msthods (jjjla jj '^ ** } ^Lill <_Jj.laJI ^j^ajx . J 


.HTML JjN\ aj^ia ^ . v ~ m . .. 







Jtia 



cxt.fillStyle="#FF0000"; 

(jjl 

fillStyle 

cxt.fillRect(0, 0,150,75); 

(Jjjailuba 

fillRect 

cxt.moveTo(10,10); 

1 JlJ-a A^ljl 

dlLul.la.VI 
•* £ 

moveTo 

ext. 

cre3teLine3rGr3dient(0, 0,170,50) 

«.Lxi] 

createLinearGradient 

ext .addColorStop(0,"#FF0000"); 

J] UJ^ 

Ujlil 

addColorStop 

cxt.dr3wlm3ge(img,0,0); 

ajj)x^a 

drawlmage 

cxt.lineTo(150,50); 

^aailaaa Ja**k 

lineTo 


<canvas> ju . ikJI £>jl£ Jjh JAuu : A JjJaJI 


M> &* ^UUII qj>j 

:LaA j Client (JxaaJI l_i Sjla ^j-a CjliUJI (jJUfllia^a yjjjlS HTML 5 

jjc. ojjiJ (_Jxa*ll i Sjla ^j-a CllliLnll (jjl£ll IjlA ^A-s'nni llOCSlStOTSQe (jjlSJI . ^ 

'. 4_iil2ll <Lal*JI A j. b^g,H ^.Vs’nui j 

localStorage . varName="value" ; 

(j^-aj j jjatLall IjlA 4-aj3 ^A VSllie j jjjLlall jA VarNafTie (jl i"u*s 

“La 1*11 Aj.jx^aSlj jJ*J-aJI *Laj3 

localStorage . varName ; 

ojiial Ciaxll o_ijia ^j-a ciiliLiJI (jll£ll I1& :sessionStorage jjllSI .y 

* <Lal*ll 4jUjL^all j t-lais <Lal^j o-lli-a 


“»Y 







sessionStorage . varName=" value" ; 

J ^)J*lLa]l ILa *Laj3 ^A V3lUS j jjxiall jA V3rN3IT16 (jl 

“La Ixll Ax jj^alU jJxLall A-aj3 

sessionStorage . varName; 

.Java Script ajL£ aliil djLLnll Qjl^-a£ * 4 lAj^. \ ^ 


HTML 5 cj£ JoIj 

:HTML 5 (_ 5 ^ 0 -ll.l^JI ^joijllj j^yLLsjS ^_yaJxji (_Laali LaLi^. 




<llLa 

<article> 

jX3j-all CllLajl^-a ^j-a 

<aside> 

dljjL^all CllliLa (Jjxiulll 

<audio> 

li^-a_)J ^jll 

<canvas> 

>°'j' jj 

<command> 

xl A_u^aljj2l CllljLl^. A-ajU 

<datalist> 

La jj.^\c. 

<details> 

^jLk plugin J ^Ui jxa^l 

<embed> 

<figure> j-^k. jljLc. 

<figcaption> 


<figure> 

<^ii^all Jjialia (j-a A^Iai-a JjL 

<footer> 

<ajL^all Jjlalxa ^j-a <aixla 

<header> 

Vlluiall (_j-a ^u-u3 ^jC. CllLa^lx-a 

<hgroup> 

^Lj-aill ^ ^j’4a.lll 0JjlLa -llljj 

<keygen> 


<mark> 









lafum .Iis>..a ajj-L-^a-^-a diLujlja 


<meter> 


olJ Jajl c 


<nav> 


^ C> £>■ 

La ^j-a 4-a^-al JaJjal 

V t _pa_)3i!lui-a]| (jjS AJLi. ^3 <j^ajC- -»“n > u La (jc. ^Jja-allll Rllby AjlI 

Ruby j^aic. 

Ruby ^l^aJLmb 4jc. Lai 

Ruby u& 

Alluball ^j-a ^u-u3 

JalLoj^ll ^pL-^a^a l ijjxlll 

detail 4_u)JjJJ I— SJXJ 

jJ-llill ^j^saljc. ^j^ajjtl 
(J/U-^a 3j.ia. j^k xm 

HTML 5 <ji ajA-ujil JJj : ^ 


<output> 

<progress> 

<rp> 


<ruby> 

<section> 


<source> 


<summary> 

<time> 

<video> 

<wbr> 



^Jtu/ J^dll 







Jjjiali ld£J J HTML5 Ljd ^lAadmlj l_ij_j]| dlAliuba <jIjS <Lla.i£» ^^daLatl (Jj>^aall ^9 Idalaj 

Lj^aia y&^\ I^A (jlS AS9 4diaJI ^ j cCIiI^ILoiaII tilL (jjjoiij j jjlajj dj±& ^^gjaljj] 

lAA (jjaSljj ^itl OSS AjjLljaij^M -laLajLM (Jjljjl 4.Lg.,a ya jA ^Ja-aJI j (JSuujU (_j.I*.'l,l La j)L? 
(jl ^jJaluij V ~y aLM ^llj (_^3 — liifLS J tCSS3 J <— Sjjlj (_£A3I j dAa.1 (Jj^fltl 

. 4j.lila.ill CSS (jc. liltL <_Jj 3 d.Wi im lild CSS3 (jc- LiiAdii 

? css ^ u 

ddji j Cascading Style Sheet Lladl <> ^jVl <_ija£ U jLdd <^a CSS j] 
L_U_j]| dlAiluia ^j^alic. t_dajj ^igj HTML (jl j)Ja. (_gi9 t "ULldVI -laLajL? I (jljjl" Igjl ^^Ic. 
Ujl J jouVI JaLaiLM (JjLjjl J ‘^J^atiatJI aAA ^Ja-a j (_J£d t da jJ aJ$J CSS j)li 

j i lAj^g-la (_Jj 9 dljid l_ 1J^1I (_gjj)-a a td^dj ^ill (JSldall jdl (j-a dfdd ^ i a ] jll (j^.La]l 

.4 K dal I oAA yaytii 4_illj]| jjaall 

CSS Jjjj l_u^I 4JLula 

l_1J_j]| dll jjL <~t y^a[jc. t_ daJ Ad ^aJjajdl ^^Ac. I jdjill HTML Ad ^..bajdi ^aJ LaAic. 
(Jjddl (_J£d j ^.id (jl HTML (_£a1 Ajljj y\ dliA j)Sj ^1 j tiaafl 

yaytllxjiA (_JS — <_]ljj La j~ j)l£ da. ct_JJ_jll dldajadja ^^-a-aj^a-aJ 4-agdl aAA dfaji j t^Aiall 
4. J (_^ald ^^da^dl ^Ja-aJ L_U_jll Lad Jj^alic. yz y^ajs. (_JS yayu L-lljll dlda__)*dja yz 
,4^1j_dl ^xj-ra a Adj j)C. jJaAll y: a*J j yaj*"\i n <a\l jaax^im (_$)j LaJjoia. 


^a.jall LS^° y> dakjll ad 


“W 

T 




<font> IfrifLal y-a j ^n.nilb eAlAa. ^jjjjj dlflJjJaU ^Jaiill a-i^J 4_±iill 

ILa (jlS j (jAjJa J ~-v ■>■ J Font ^.lalluU 

tiJliA jjl£ J1S3 (_gj_jla-a] <jjoiilLj <J_^j La (jl&^joi <j£J I Jjt I^ bbj^aa. lliii 

< jLaC. (jt ^ ’l»J Lax cljLli.1 a_iVl jl allllx ^1 IgjlaajL^g .lie- Jj^aJ ^ilj-aJI ^j>i» \ 

Ja-bJa ^gi -1 j.1jLJI ^gjj <^.LaJI q C. liliAb cyJjJjS -Igaa. j dlAjJ ^IbaL llltajLxalt a^A (jjjoilj 

J a.l^.jx Jajja.~\ j j (jl_^IL Cjl^iaxa ^glc. (JjjL^aa^ll lijLx aj^SjLall ^_)x»jbxai. 

.OSS jj^Ja £-a <U£baa]| aiA dbuj^lj JlflS L>^> II q . ua ^jx j 1 4-mjlaIix 
11 a j Jc. HTML ^JU4j <_]£ <_J£xu j jgJax l j^aj CSS (jl (Jjsll LilSxJ Lll-llx 

aj^l J (_jl£x ^3 jg Jax j (_J£xi] i Saxaj <LjIj£j ^jSJjoi 4_jl Jj^ 4-jjauilj ^.’m..i La 

.CSS Jl CIjILj <jaJJj-a]| C-iL.V.u^a ^.Laa ^Ic. J^jxaYlH ILa J^.La.u.u tiaSS a-lajj 

CSS ^HVu*il ?xil\ 

: aitiaaL^a ^gi CSS AxjLijaijLM JaLaiLM Jjtljl Jjjla dlLLi liJliA 


: Inline CSS CSS 


JliLaJI jiajl C(_£.l^. ( _ s Lc- J^^ajc. (_J£j <x*alij| Styl© ^gJI CSS a^ilxu ^»JJ 



• CSS <_Jj3 La (_J£LxxJ Lj-luu — J <jjaijJLj— L,L>a9x jjc. AijjUl ajiA j 

:Embeded CSS (<iia^l) 4xkWI CSS .Y 


AjjjjjaJI A_ja 1*JI 4_i*-aaJI (jc. ^pL-al! AjjLajix-all dll^Baj-a-a .a I^A CljJjj Ig "Jsuj" fOPlt <A2kjJJ ^^C-ljuSl ^C- ^-a 






j <style> ^gAuaj (jjj Qjd Head Jl A9.La'i,a CSS AjIjS ^aJJ 

</style> 


<html> 

<head> 

<style type=" text/css"> 

CSS <3 1 J-Llmi 4—) l_L£ pJLj l_L» 
</ style> 

</head> 

<body> 

I La isf SLn 1 I o 

</body> 

</html> 


Lai ^j-a 3j-la-a]| -liaJI CllIL ^Jlj-aU odla. AijjJaJI sLa jm'i j 

.AillLlJI AijiaJI ^CtLI^I (Jjdaals q^)..u£.II j <lxujjlall 


: External CSS CSS T 

ILa JaJJ ^aJJ cVjl .CSS ^IdLaVI (_)-a.?a -1 (JiLoiai t- Via ^3 CSS AjLlS ^aJJ 

JJC. 4.~a.a,x-ra.H <aiala ^3 <Hnk> ^ajoijJI L_U_j]| Ankij^n £-a t—ilall 

i^-LlaS stylesheet j <aLL*JI <^y j href <LL^>I j Jl < kLaJl jL^ 


<html> 


<head> 


<link 

href=" style . 

rel=" stylesheet" type=" text/ css" 
css" /> 

</head> 







<body> L_L» l ,jjJLj^i</body> 

</html> 


. CSS ^alAidjoiV A-JlLaJI AijjiaJI ^A AajjJa]| oil& j 


CSS 


lie. l^-La a-ic-ls <_]£ > L-aJ cRul6S Ac.j,a-^.,a (j^s CSS (jjSlij 

'. jA CSS a-ic-lil ^IxJI (JSjjjll j ^i jj^salixll Qja Ac-j,a-^.,a 



Jj^alic. Ails t _ s Ac- } J { jjjj ojjSiaJI ^Ja-all ^uajL^aA ^.lATk (j. iJail) La li& j 

.selector dJJI jjjlki ^1 A^L-J) 


f \\ Li \ 4 li ^ L n A nOi/S O - ^ L ^ ^ A 1 ^1 1C1. . *\ V ‘\-V ^AdjOlJ djL^^rf&lLS 1 ^ A m l l^y& ^AJJ LaS * 4 Li j -v. \ 

ajjujj A^.V LajujI Jajjijl ^3 A will QjSj CSS ^^3 j SjjjS dlAWlll j 4 Ig jlc. CSS ^C.|j3 

#searchForm J\ #headerl J\ #linkl JLo U id a^I jjd jS j <p J a J hi JL* HTML 

l^ynjC- LoS 4_ltiLl dj^)33]l ^^3 C£jd dlA will ^*\u*i £flallj j 4<Aili ^C- (jjSj AJ j 

Ajlgj (_5-S Igdlx-a dlA W^all 4il£j (JjA^. 


I (JS/MIj <-<u3^^jojI CSS ^gaul < u^ald (JS 


property : value; 









j 4 -aj 3 ^A V 3 lU 6 j j^Ja.all 4 _u-aala. ^jj| ^A property (jl dna. 

. 4 _lllj]| o^aill (j-a Ijlik-I (_^ojL^aaJ| <sl£ (jlaj^jLlujlj 1 -llLoj j tAJajiiaJI <i^alillj 4 ..u^alal| 

Sajli j y° > n ^_yajx] Lajj j cAc. jail c qj 1 ' h (_jl ^iaxj V OSS j\i HTML A :S^£jj 

- 1 ->'qQ *A ^qj i*n\ i 


jgfo,a (j-ojLuai 


I^A j j^yajj^ajW ^Ja-a (_gnn‘hl (_^ajL^aa.jl ^j-a ix. j-aa-a OSS ^)3jJ 


I^^JjLaS ^-.-L'Lall ^j]| J tsxt - 3 1 i Q n oliLa-a]| 4-ij^ala. • 

hi { text-align : center ; } 

right aaiiII ^LlA (j^-aj _5 oYhn.aH ^3 <hl> Jj^aLic. £J^ia. < _ s -ia *_3 hi .}.la-a]| (jl a'-i.ja. 

center jl jLoulJ (_^aiJI olila-ai left jl (jxajl] (j^ajJI olila-ai text-align ^1 

.width (_pajxll 5-jjLuila o^aill jlajail (_Jjt^J justify jl (_j-aaiS\ JaJjgijjt 

i^LaS ^1 j text-decoration (diufcll) j^l 4-i^U. • 

p a {text-decoration : overline; } 

jj^allc. jys (_$\ (jAjJa a^_j2aj-a3l <3> -laj|j^)]| Jj^alic. ^.Laa. ^^jaj P 3 -i-la-atl (jl I— Ua. 

(jS-aJ j t(_^a^i-aill ^ic.1 -laA. (_pajC- t _ s d*j OVeMine ‘Cauall j i Alima] I ^3 <P> CllljiaJI 

J (j^iJI JaJ IlL (_paj*l underline J (jjjjitl *UJy none I ^1 ijj 

.(j^l L_ik^] line-through 


I^LLaS ^adaJxaj (_g^l J direction aejjii]| olajl 4_u^ala. • 


iVI taakjall jjjjall jjl (j;j\ ^jjl Laio (jaj aj-uhil CjAjjl l-ij j "atljV" Igjl DeCOf ^A 


\ . 1 







p { direction : rtl ; } 

right to J j^Laa'i-^l^ rtl 4uuail 4ai*j La 11 a j jLaJI ^1 jps aa-j^l aL^jl (J*aJ 
^1 Itr A .a, .tail clLuL (j.ua.i.U jLoiJI (ja aa-j^ill alalil <_!*-?■ (jiLaJ j & ^ I ©ft 

.direction 

i^-LlaS ^^lou ^pil j text-transformation u-ij^Vl aJU. J ^ au^U. • 

p { text-transf ormation : uppercase ; } 

A_UaalAil aCA L^.Ij (jl (jS-aj j i jjjSJI <-_9j^JI AJla_i <p> jj^alic. u_9j^.l ^.i-a.-^ <_J*^ 

capitalize J\ aj ? »..^ll oJjjaii lowercase J\ aji£l) uJijj^ii uppercase ^1 

. A-al£ (_J£ i^ya Ja93 

i^JjLaS ^iil j text - indent A-ilcail A...uagl^. • 

p { text-indent : 2 Opx; } 

CilljaS A_ll.lJ £-a ^ad^JjaU La llJlc. A^.L)VI J t (J “'“V 1 ^ * jl-flLaj ^iaLaJI jps A-aJ£ <_Jjl “^IjV 

. AjjA-adV I Ailll 

I^ilLaS ^.^JjoU ^ill J COlOr (j^lll A_Uual^. • 

p { color : red; } 

(jjltl ijja)] |aJJ j t A.ru9j..^all ^3 aCjaa^ail <p> jj^abaJI ^.ba ^^jju P C-la-atl (jl C-Lla. 

white jl green J\ red Jia A^yl^yi <iliL> (jjlll ^1 jILuAj Lai color A-u^Uii 
jl #FF0000 jLa Hexadecimal (jJjuC. Ciua.ll ^Uaillj (jjUl A-aj3 cLbuL jl 4^eJj.. 


^ 3 j <11^. ^ <jl£ lb] A ^ JjV! SHa3 ^ya ^ djlil cilUA 

. < 11 ^. 


> «Y 








rgb jjc. jjlll jl #FFFFFF J\ #00FC00 

rgb(255,255,255) J rgb(0, 255,0) J rgb(255,0,0) 

(jc. (jljWI l j ‘(jjjVI J j 4 j^ <j-a (jjl (J£ 

ClLaJl Qjill (J.ft'Q 1 J 6 1^-13 (J^jjVi/ 1/ (j£ 4 _JjoiJ 

4_2kp ^jJLAjl^ jliiol ^aJJ j C^A^.V1 4_2kp (Jjl jliic.1 ^aJJ ^jAc. 

00 (jjj 4jl^. ^ia ^jdij ^ilallj j t ^ j j 1 V 1 (jjM 4_2kp dJd jLqc-I ^jj j t 

(> . ^>j (J\!La]l l)^^ 0 cA-dja FF j A_xua ^jjl£ 

j #FF00FF j>*iqn\l JjU! 4 _ai 3 ^,uAi j ^1 QjJ j Jbjfr' 

j #8B008B (JllLoH (JjjijVl j c QjqVi pc. ^vAl u^ - *^ 

Apliill Ji-aj j Qjlll ^jVI (JIojS TQb £jtill jjc. Qjill (Jjlcqj ^3 Lai 

-1^£ 255 J (_jj.il -1^£ 0 (jJJ ^J-lij Ajla. (J5 4-aj3 (jil JjjjVl Qjiil AjJIjJI Jiaj J I y- jaa.^/1 


(_j^ajl^ai>. (_jjaj*J (_£A]I j JUlaJI .j&Luu3 


<html> 


<head> 


<title> 


(_p J^ZlJ I I J^_lc_0 q O j Li/U* 1 J I l_Lci I “LCt—SLZ) 


</ title> 


<style type="text/css"> 


text-align: justify; 
color : #ff 0000 ; 


text-decoration : underline ; 


direction : rtl ; 








'll ha ^1 ^V*u.uI : V £ 


^ . £ 





Fonts jxit 


jjk Ja^Ja-kjl £-a ^aJJ j cFOfltS Jgj-lajaJlj gal'll (_^ajU^akJI ^j-a Ai^aa-a OSS ^)3jJ 

Jak. ^LLojI |SJJ Cilia. cfont-family "Jg^Iaa <SjIc."j Ifria (_J£ ^C-Jj Clllc. j-aa-a JSjJu ^Ac. OSS 
(jjSLl j font - family 4-U-alaJI ( ^JI comma Jj^aljAj Aij.i..a4.a Ja.k ^ja j!i£l a-Laxal jl ^j!il 

Jaail t _ s -lc- JjilaJI IgjS t _pa < )Jt'.i.i..a,aH ^^Ac. jCxlil ( _ s Ail AALall ^ j t^^jCajjAsVI AaaAl jA JjVI AaaAl 

. Ic^A j ^^gjCaj^isVI jA ^llAI AaaAl Jaa-l <jlA ^^.CaljAs'lM 

j Sans— serif AAjI*AI j S© rif AAjI*AI ^a Aa^laaAl qa ^..bCal^iial JjIjc. AAlAj CSS ^Ajj 
^yajc. juc. AiAliill AAAl*AI j A-ij.Aa.iV I <ill A_iil!AI AAilxAl JLa*jjoilj ^uii; j Monospace AAil*AI 

<a-a_)JI ClllxA Cllj^iiCu (JlLa A_ii^jaiLaAI C_l|^.4..ulil 

J font-style 4.}j^alaAI ^A AajAaaAll ^Sa'lll ^j^ajLuaaAl (j-a (_£jal Ax. j-aa-a OSS ^)3jJ t-aS 
4-U-alaJI j c^(_£.il*AI AaaAI| nOfmal j ^JjLail Aa.kllj italic ^xlStl lg-AI .Vu>n (jl (j^-aJ 

) l = em ) <J£) em o.ia.ljili jl (JjaiSjili (j^aiil ^>aa .ii. wA ^ iai » cl ^1 j font— size 

I^llAI JUlail JlAl^i c(Jai£j 


<html> 


<head> 


<title> 


-b J Uir 1 1 1 J 1 L JLJ- 1 

4xt —Sua 

</ title> 


<style type="text/css"> 



^.Ij Jaa. qa 4j j£-a Ja _^IaaJI <ijlc> I^jS ^jm\l -laaJI ^ilaj— a -a 





p { 

font-family: "Tahoma" , "Simplified Arabic" , sans-serif ; 
font-size : 1 . 5em; 
font- style : italic; 

direction : rtl ; 

} 

</ style> 

</head> 

<body> 

<P> 

j I j j I ( _ s _9 Jo jJoJc 1 I (/i_j L tnJc 1 j I i_Ld I ist suo (j _c 5 j I sla I I o i_a> (j I 

. 4 i j I I Jo I o 3d! I 

</p> 

</body> 

</html> 



: V ® 


^ .1 




j 1 Aijlc. UjV sans-serif 4_xuall cl>^ ^ i4Ja^^La 

.sans-serif 


LjIjjII Jfli 4 o^jUai. 


Jajl_5ji] <j^aUk dll-H^-a J tJajljjJI J^3a.a.\ <j^alA ^j^ajL-sai. A=»jJ V <ilLaJI ^3 

I^A dll-i-la-all j i <alla^a]| ^3 j^.J-a-a (jjxuH] 

lil 3 ^^1] jA j 4_pl*JI %llLa. ^3 jg.J-a-a Jjjjailll J 3 i link • 

. 0-la.j ~ A-v"', .il 

. U Uii«a aJc. ^ -Laal^l jg-3a-a (jjjaiill j 3:visit6d • 

.4_ilc. sjUll ^luj-o Lo-lic. -laj|^]| j^J-a-a ^Laii’il ^.Vs’nui j 3lhOV6 • 

.<jic- <IaaJ Ja^]! ^Ja-a (jAuiUl j 3:3ctive • 

Ki-alaJI dll-i-la-all ajlA i _yajx . j JllLall j 

<html> 

<head> 

<title> 

Jo_j I j j 1 I j-^Ja -0 (/i_j L»z 3 J* 1 j I L JLJ- I Ast —Sua 

</ title> 

<style type="text/css"> 

a : link { text-decoration : none ; color : blue ; } 
a : visi ted{ color : green ; } 
a : hover { text-decoration : underline ; } 
a : active {font- size : 120% ; } 

</ style> 

i .v 






</head> 

<body> 

<a href="#">normal link</a> <br/> 

<a href="www . google . com">visited link</a> <br/> 
<a href="#">hover link</a> <br/> 

<a href="#">normal link 2</a> <br/> 

</body> 

</html> 


ojljj JjjLaJI j-lil 



SjLj Jxj j CilliHI { J&- Jtil\ jLuil j±n I JiA : V 1 JiuJI 


.a:hover ^xj a:active <a:visited j a:link ^ a:hover 


Backgrounds £LilaJt 


(jc. l-l±j c^jualixJI IdLiilk Jjjjaiiil (j^s OSS 

“Oua jUu.Ij Alij] 4-iala. a. lad > aj j background - color 4. ; u-aLaJI 

: VfcJJ jjl]! 


1 .A 




background-color : #CF1A11 ; 


background- aa^UJ] ijj^l jL^ aIaJ jac. 

Aa.V Ajila^ Zjjj^a q \ dm y^-aj j 

rJ^L image 

background-image : url ( ' image . jpg' ) ; 



sjjjL-all jlj£j AijjJa AiAaj ■>■ ^j-a ^AiilaJI^ ajjjL-all ~-v ■*■ (_^3 J 

jl ^ial j\fi£ repeat-x <*£\\ iiJ ^ background-repeat a^UJI jjc. 

jl lx,* (_5^j-ac. j ^Sal IajIjSiiI repeat jl ^js^-ac. repeat - y aaiqII 

ojjj^sall ^ac. yi-ajs Ajjliill AllaJI Lai AllaJI ^ ILa j j|^SiJI ^.ixJ no _ repeat 
JSI jl saJj aIiJ ^ i-ua. background-position a^UJI jjj^a <jc. l^b^a aja*j j 
jl center center jl center top J\ left bottom J\ left center J\ left top ^ 
j ^Jtill JllaJI aaUa] aright bottom J\ right center J right top J\ center bottom 

;Ajjjj^a A-iilaj ^p^i) j A-ij^l Ajal-a.i <_JjLM < 'P> (jjj.^a.Ac- A-i3 ^_y. aja.luai (_gL]| 








background- image : url ( 'image! . jpg' ) ; 
background- repeat : no- repeat ; 


background-position : center center ; 


p { direction : rtl ; } 


</ style> 
</head> 


<body> 


<p class="firstP"> 


(jn > 3 I 3 (J ^ 1 ^ 1 3 r\ jji 


</p> 


<p class="secondP"> 

I 1 j 4 )J 


<br/Xbr/> 


jJoxj I J j j_J i II j pj 9 Ljj <br/> 


<br/> 


</p> 

</body> 


</html> 


> j I (ji> j_x 1 4_> 9 LS 1 1 i_> Lul_o 1 


d' Jby.,,,1 classes ciiUallj w "'" p-d-i j ■ 4 , a t*3 li& -4 d ^ d 

(i ]a$j pxd d-iujj pjj Jlxj ( OSS ^3 ClaSS Ajill L_a^au Lo j A Wq n ljj^Ax*uj pxd 

.AiA]l oAc-Ib \\ UjjUa^i j} 9 y J ^_JCy)j ^jA-aljxi] ClaSS A_i^al^]l 


( ^3 JjjLaill Jllall j!aj 





(j-ailuok jLuil jJjj : t* V JLuJ) 


jgfoa (j^ajLuoa. 


lie. (_]£ ^Li ^_pajjJt-aJI ^j]I/>jJI £-_ji ^j^in^rsi ^)JC. OSS j^Jra-a ^J^ij.^i-si ^aJJ 

IjjjjJlj]) q ill 1 .olaJ' li& ^aJJ j t4-ailaj| Jj^salic. (j^s 


qa ja-aic- (_]S ^aLal ^Skj^\j ^_ji Aj-iaii] iaiL t n ,_gj]| j '. list - Style - typ© • 

4 JU ^ none j disc j square j circle Akh j t <*j ,1531 j^lk. 
lower- j lower-roman j upper-roman j itiijJ I j±. 
j decimal j upper-latin j lower-latin j upper-alpha j alpha 

. 4-ajlill “Ula. I&JJC. 

qa jjL^aic. (_]£ ^Lal ^aiailmj j Hist— style— imaqe • 

: J£jA]Ij ^aAajjjgU j (<J 4-ajlall Jj^alic. 

list-style-image : url ( ' image .gif'); 


\ \ \ 





: JUI JliaJI JAUal 


<html> 

<head> 

<title> 

I j 5 ] I j/lJ Luaj* 1 j I iJLJ- I 4_pt —Sua 

</ title> 

<style type="text/css"> 

ul { li s t- style -type: square; } 

ol { li s t- style- image :url ( ' dot. gif ' ) ; } 

</ style> 

</head> 

<body> 

<ul> 

<li>item l</li> 

<li>item 2</li> 

<li>item 3</li> 

</ul> 

<ol> 

<li>item l</li> 

<li>item 2</li> 

<li>item 3</li> 

</ol> 

</body> 


</html> 





L^t ^3 (JtLoll I^A j«lJJ 



l-u^II u<2 jxlukA ^yi j^Jxq iL/r\ jLuil <Lai^ jAjj \&t> : T A JLuJI 

j^Jia (j^ajLuaa. 


4_lijS L_U^]I jijla^n i ajc. lil OSS ^j-a AjflJLuiJ HTML jj^salic. (jl 

:S/jl ^till (JliLall JALuoj] tL_Jjaill<JI ILLoi Clu-iajC. CSS ^j^ajL-sai. t— ajJaj 3 


<html> 


<head> 


<style 

type="text/ css"> 

table 


i 

f ont-f amily : "Trebuchet MS", sans-serif; 


width : 100% ; 


border-collapse : collapse ; 






direction : rtl ; 


text-align : center; 


td, th 

{ 

font-size : lem; 

border : lpx solid #98bf21; 


th 


font-size : 1 . lem; 
background-color : #A7C942 ; 
color : #f f f f f f ; 

} 

.alt td 

{ 

color: #000000; 
background-color : #EAF2D3 ; 

} 

</ style> 

</head> 

<body> 

<table> 

<tr> 


<th>A£uilk/th> 




<th>(jljj*JI</ th> 

<th>.dJk/th> 

</ tr> 

<tr> 

<td>^ A£^i]l</td> 

<td>(3 j ^- 0 - 1< /td> 

<td>k)j^</ td> 

</ tr> 

<tr class="alt"> 

<td>^ “UaAjII 2£jjill</td> 

<td>-il-^ij</td> 

<td>t3l>*Jk /td> 

</ tr> 

<tr> 

J_9 I o j_a_)_d) j_>T ( _ s — ! | 

</ table> 

</body> 

</html> 







d'-“' r ' ] CSS . fljJijj : r H JSLuJl 


I^gJbLa ^jA (jjLoill (JuLaJl jjc. 


(ji C. Qj] j JjAaJI -Ij-la. <£Laj_u jjc. ^)J*j (_]jui£j]Ij <Lai3 Ig-ill .Vi mi J ibOfdSf • 

cdashed ^Jaili-a .lai. a sol id (JjuaL-a "L3 ‘'~ s - -ll-laj ^gJI -ij-laJI 

(jC. CLlJ-laJI s "^ ^-SboiaJI I S_)^-a ^Jllallj j c(^tJj •• dOttSd JraaLa 

. a_)i3 ^3 bLu^aiu j!i£l 4-UaolaJI ajlA 

^.Ij jlik.1 j L£iLiJI -ij-ii. ^jauj Ja ^^il) j : border-collapse • 

(jc. Sliaui^ 4-ili. l£ jLuc- 1 -»“n > ii ^1 (collapse <Aia3l^ yjnl-s (_J£ (jjj 


J <Jjllia J la ■ V (J* j Lajlj ^ ■ ^jj Cljljj!±^-a oalj 3 :<ia^^Ls 

4_JjLli]l I^IA l_S^aj 4 .alt Ajill al JJC- olji&i. La IjA j cJ^jLuJI LilLla ^3 <Jj.l^JI ^3 1 ilx3 La£ 


Zebra-stripping 


i n 




Positioning uxk 


La-lic. jjL^q'u.." j^ajC. ^aJJ L. AjS j t -ll-lij CSS ^ AjLjJajd] j-ajl—a/s. ^jjj 

■IpaTll o-iC- dlllA j C^ji-I Jj^aljc. L-kla. Jj^aljc. £jdaj ^JJJ La£ d-la. IjajS aljia-a jjfiJ 


J 4j3-jiLaJI ^3 CSS ^3 jjj-soijtJI 


l—bata-J (_£ I 4jo^jl^o]| ^3 ejjgJa jl£-a <^3 j ^aJJ iStstiC • 

jA IllA j cA^ii-sall ^jjojj j-ajL^a 4-ftjoij j^Jo £jJa^a j i - ' ijJJ 

U-lliJ ^aJJ AjjIj Cllljj|Aa.y lilL Jj^ajxJI £_l^ 3 j ^JJ :FiX 6 Cl dulllll • 

aj^UJI J\\ fixed ^ill iiJ ^ bottom j right j left j top j^ajljL^ara.U 

• Cjbjl^a.^U V)£j-<s 4-ajL^al] jjojjVI j£^ll jliic-l ^flallj j c position 

(JSjoiJIj IajUJ AiIjIj ciiljj|^i.y liiL jj^a.'ut." ^j^aj : Relative • 

J\\ relative <^\ iiJ ^ bottom j right j left j top ^LaaJ] 
]j^ya A-ifLullLaill ^3 <jaiaj j > .aa 11 (jS^I jliic.1 j t position 


• CjLSI^U 

•* s- 

(Jui^jUj lA.}ljjaj| ^aJJ AjjIj CjLul^a.V lajio Jj^aixJI £jJaj ^aJJ lAbSOlllte (jUala.il £jjll • 

J\\ absolute 4-aA!l jUJ ^ bottom j right j left j top 
JJC- £jdaj-aJ L_ll jj^ajc. CjV jji*JI j£jll jliic-l j t position 

jlilc.| ^jj jjc. ^jJajxj L_ll j-.-aa.iC. (_jl JSjolj ^aC. (jla. ^3 j cCllLijl.li.UU L)£ja 

• CjUil.la.UU V)£j-a <html> jjL-aa.ut.il (JjLUl j-uilUM j£jll 


: JWI JUUI iaUU 

<html> 

<head> 





<style type="text/css"> 

* { direction : rtl ; } 
hi 

{ position: absolute; left:100px; top:150px; } 

</ style> 

</head> 

<body> 

<hl> 4_ a_Lki- o Ci 1 > jl X-> l > (j I II I j_a</hl> 

<p> I sLlJo 1 I ^ oj-C pJ > 4 a_l h a 1 I Cj I > j I I 4 1 L> ( _ s —3 

( _ s _9 4 _&j4 j J J J J 0 I— S — o (j-C J. lo i 1 I (jA-X—i 4^zi_j L^oJc 1 o j_o_o 1 I Cj I > j I 1 

4_pt_da_) I o j_a_Ld)</p> 

</body> 

</html> 





CSS ^uaU*JI AjuSaj* (j^ajluxk ^hVwuil Jlla : t * JLuJI 




j.a'N -lj. Wn J. W^ll \ AJaj'vl.a 


^ U 



.iliuL J Z — indsx 4_u-iaLd]| Jjjjla (jc- Jj^aljc. i_ fllra. ^jj^aljc. £jdaj (j^a-l 

-lAldil C(_£jdVI Jj^aLixJI |»L<il Z — indsx Jl ji jlgJal ^aJJ Ciuja. C l^-JI ^ j*s > .-i 

: JUI JUJI 


<html> 

<head> 

<style type="text/css"> 

* { direction : rtl ; } 
img 
{ 

position : absolute; 
left : lOOpx; 
top : 50px; 

z-index: -1 ; 

} 

</ style> 

</head> 

<body> 

<hl> 5 I u I _9_Lc</hl> 

<img src="imagel . jpg" width="100" height="140" /> 

<p> 1 I 4_a_> 9 (jaJ 1 I I JL» bi-Jd 0 j I i_9 

z-index 

J—SUO (j _9 Lad L _ s _i 1 I j (jnJ 1 I J iaZ) Id 1 I 4_a_> LJ I (j_0 J_9 I J (J0 Id 1 I 


L _ s d I j_3 9 1 J_SbL_> 




</body> 

</html> 



qa j.n^ ^L-sajjtJI (_gjja. .a l^gS (jj£j <11^-11 ^3 4_lajjLul ^pajC. Ldajl (jS-a-J 

:^SIjJI JllJI ^overflow aj^UJI J\\ scroll 4-^1 jliJ jc. dlk j 

<html> 

<head> 

<style type="text/css"> 

* { direction : rtl ; } 
div 
{ 

background- co lor : #00FFFF; 

width : 250px; 


i y . 




height : lOOpx; 

overflow : scroll ; 

} 

</ style> 

</head> 

<body> 

<div> 

<p> (/Li 1 1 ^ L-x_j I (j_o J_9 1 q j_SLLj ^ 1 L* 1 1 j^zi_Lx 1 1 ^ L-x_j I 

4 1 Lk> I J j L> Lu) I 1 j j ) J— oh) 1 I 4_k> j-a) I o^J-® pd-J 1 uJ iji I o I j-J-J <i i_l I 

. 4—) 1 I 4 i 9 LlO^! I <I) I <l_LS 1 I yiLSt—J 4_B Li) l > J_LL I jyL 1 I </p> 

</div> 

</body> 

</html> 


^3 ^LLaS (JjjLuJI (JULall j-ll) 



jjoSJI lj! j j^aUxI] jjjaIII Aja ^uil jC- ^ic- Jlla : t T JLuJI 






css (jk (jduUiii 


height j width ^_yajxl\ JLL^. (ja (JlfLaJI JaIjoj iS^" .ilxjl ,ll.laj ^aJJ 

:2uM (Jjljall C1 jI^.Ij jl 4-Laijj ^J3 jlijaiL liULj 


JLi-« 



150px 

JjoiSj 

px 

50% 

Ajjla]| <Ij.aj.llj 

% 

1.5em 

^ i ^jloy em ^ J£ 

em 

lin 

<_£>] 

in 

1cm 

jll/J 

cm 

100mm 


mm 

30pt 

1 

= A±&&\) 4-lakj 

pt 

15pc 

— = 4-laaj ) y = ILllllj l£jj 

pc 


CSS (ji ^Uii! : \ * 


CSS Box Model 

jl " ( Jjj.ll^a]| La ^3 4j3jiLaJt ^ i_laJ t-llLajL^a ^aXaj^aJ ijf- Clu.laJI -lie. 

<jLLj| ^ic. HTML .iLuax ^j^aLc. jj-a jj^aiic. J£ JLiaj dua. t<jjyiajVL box model 

(j-a ^A j ^-ij-aj (JSLjj’i <l^.|j!La CqH ikiuia AjljjLi (jja jr L.iJ I 

. j^n\x.W <Lllgj j 4 jI.Aj (_g-ajaij (jJJ ^ 2 ^j-a jA La (_]£ jLaJ j I COnte fit ^)jL^a'm.\l (_gj*W <\ — ^ 

• a.ij.1^. jjjj j jj^aiaJI (_gj'W <i yjj <L_ialiJI <sLui-aJI JlLaJ j I psdd i flQ A^JjVI — X 

. j.l^Iu. 1,1 jUaVI cJii-aj j iborder — Y 1 

j jjjj <L^-ali]| <sLuiaJI Jlaii j :m3rgin <i=kjL^JI — £ 

. ..' U . U aai H ^ 

i rx 





; Jgj. Vi t ,o\l ^ ^jdajJ 


Margin 

Border 

Padding 

Content 


box model £j>»j : 4 V 


(j-a ■bc.j.a'^-a ^ic. j$\ s^A jj-a 4.alVba Jfb (_]-al£JI L_lJj]l jjJa.a] CSS 

.4_bb]| 


border 

j border-width ^j^ajljL-ar^Sl ^)JC- ^i-sabaJI ^5b)wj.l (jl L_U_j]| jjJa-aJ CSS ^-ajoij 
Jl J\\ (jaUll cjI^Jj (j^b <xa3j jUui] <Jj cborder-color j border-style 
J£jju jjc. ^)f*j A-aji ^bjoil ^jj j t .ij-iaJI b^Luuj jIjiLa jjc. border— width 
dashed j ^UiaJl dotted ^^1 li.b J ^bJI j border-style UII 

j ridge j groove j 4i&ldaJI double j 4_ol*JI solid j ^Jaiibl 

jiaUJ c^jAabl yj] (j c. jj*j bjjj] “baja jUxa] ^1: j cJaj^M ■ij-'L^-.U outset j inset 

: Jtbl JUJI 

<html> 

<head> 

i rr 



<style type="text/css"> 

* { direction : rtl ; } 

. one 

{ border-style : solid; } 

. two 

{ border- s tyle : dashed; } 

</ style> 

</head> 

<body> 

<p class="one">4_;o Lc i></p> 
<p ClaSS="tWO">4_5!_kLiiL_o Ji></p> 
</body> 

</html> 




m C:\Users\Mukhtar\Desktop\firstPage.html - Windows Internet Explorer 


0J C:\Users\Mukhtar\l ▼ 


x 

-If Google P ” 


Favorites ^ 0J 1000 Popular jQuery Plugi... flj SQL Injection and Cross-Si... 

0 C:\Users\Mukhtar\Deskto... T 0 T ' ” Page ▼ Safety”' Tools” 




“UJlC. J 


------ n 


Done 


i% Computer | Protected Mode: Off 


125 % ” 





AjujI Al_ixd (Alii j ^-fll^lal (_J£1 <_j-aLa. bOrdGf“StylG (_J£jJo Aj-l^j lAJa^aift 

Aillilll j >iaJ! (_]£^u Aijlilll j AaJI (_]£^u ^JjVI (Jii-oj bordGr-stylG 4 u -*->1 a \\ dilc-l^i 

: AaJI (_J£jAi 4ju1^]| j L5 li^JI a^JI 

bordGr-stylG: dotted dashed groove double; 

j border-top-style j border-right-style j border-left-style AjAjill ^L^JI jc. J 
o^jxl) j border-color jjill ^"n .^U. J^. j ; Uv, a^LH 0 aa jU j <, border-bottom-style 

.border-width 

padding o^La*. 

Jjjjla (jC- (eAj.1^. j .a (jjj AsLuiaJI^ A^ljVI jl-iia AjAaj ^jj 

padding- j l yJ^\ cJjUI a^J)V padding-right j ^jVi cijUl padding-left 
j c. jl t_ajkJI AaJjV padding-bottom j yjjkll o-sjLJI AaJjV top 

jjxj (_£.li.lj |»j 3 aAA aLjj j to.sljla'il padding 

: JM\ JIUI aaUJ l U*\d\ A^ljVI jl-lia ^jC. 

<html> 

<head> 

<style type="text/css"> 

P 

{ direction : rtl ; background-color : black; color :white; } 

. padding 
{ 

padding- top : 25px ; 
padding-bottom: 2 5px; 
padding- right : 50px; 






padding- left : 50px; 

} 

</ style> 

</head> 

<body> 

<p> 4_> I j I q j o j_a_a_) I 1 Jg 1 I 4 1 L^c 1 I o JL» 

I 0</p> 

<p class="padding"> L> I jy I ^ j-> j Sj_J_a_ll j^zl_Lc UL> ^ o Ju» 

4_p_l_> I J_J I </p> 

</body> 

</html> 



o-a jUtik ^hVurtl Jlia : t t JLuJ) 

margin o^uLolL 

(jjjia (jC. j (jjj AiL-a-all^ 4_i2kjlAj| jl-lia .li-laj ^aJJ 

j uijUl margin-right j jJ^\ UijUl 3 a \jj margin-left 

1 n 






jjjjL jc. J margin-bottom j cijUl <=J)V margin-top 

^uLiill ^aaS i .-vs ]l oUA -'u^J j to.sljla'^M ^. ; La> margin 4-u^alaJI 

^jlaja.'u.a.al A-ag.-all o^A tiJjj] aLltO A^uall jl jl-iia (jC- ^>J*ls 

: J11JI ^Uil 

<html> 

<head> 

<style type="text/css"> 

P 

{ direction : rtl ; background-color : black; color :white; } 

.margin 

{ 

margin- top : lOOpx; 
margin-bottom: lOOpx; 
margin-right : 50px; 
margin-left: 50px; 

} 

</ style> 

</head> 

<body> 

<p> 4_j_>g I > 4_> I j I (jj 3 oj_J_a_ll oij!i</p> 

<p class="margin"> i-p>j L> L> I j I g_a_9 oj_J_aJI o Jus L_ol</p> 
</body> 

</html> 


i rv 


I^gJjLaS ^3 j.l±i j 




' f C:\Users\Mukhtar\Desktop\firstPage.html - Windows Internet Explore 


0 1 C:\Users\Mukhtar\De ▼ 


xl 

P ▼ 


ik Favorites ^ 0] 1000 Popular jQuery Plugi... 0 SQL Injection and Cross-Si... 

! 0 C:\Users\Mukhtar\Deskto... ft ^ 0 ' r ‘1 ^ Page ▼ Safety ▼ Tools ▼ 





AaJjj ajail' & JA La 1 


Done 


i% Computer | Protected Mode: Off 


- \ 125% 


margin SajUJI ^aJjVI 4j*alk Je. Jli» : t a Jkiil 


j^dUx!! f ILk] 


: (jilajjiaj OSS HTML jj^alic. f.Ui.1 ^ya 

.display J\\ none a^\ jUJ • 

.visibility a^UJI J\\ hidden a^JI jUJ • 

Lai icjla aIxjIIi jiaJI LS^" £-a Ajjl!i]| AajjUl (jl 1 ag jjj < a^Lii.VI J 

£jJajxo ^Jc. jjjj La-a Alauujj JattoJI ^a-lc. £-a Aii^UI 

j^alkil (jijP t \J 


\ Y A 


HTML I^yajc. ^aJJ 




j Cxj Jajj (_jjjp]| J j_Jl3 Ja.m (JJI J C~'1^> I blOCk A_!j£ (J jggJ • 

. JI...<diV> j <p> j <hl> (Jlia ^)j^alic. £-a IkJ aJI^JI oCA 
JjjjU A^.liJI (jjC jLmill (jAx^a J > .Vm II £jCa ij J Cln^. MnliflS (jJajaj (JSuujj • 

. Jl... <span> J <a> (_JlLa ^)j^alic. £-a U J aJI^JI oCA j jjJajoi 

clij Jjjja (jc- (_>aSjJlj J inline Jl block ^)j^alixi5 ^jCa^aJI j m'n OSS ^-ajoj 

.display J^UJI J) inline j block jilaJI 

opacity jiatLuill 


jiliuil ^jc. opacity a^^IaII Jja yc- A-islLii a_= k^cj JrCi." l_lJI jja.a5 OSS ^jjj 

A-lli. ^ . * -51 J J_ja5l ^aCc. AjLa. * . » Jl (jl Clu^k i IJI 1.0 J 0.0 (jjj l> _gJiC- 

.^» i)l-i (J .'In ^alli5l jjJa5l 


floating 


Juillla ^jJaj-aj Jc. Jala^ll CSS l^.x.19.1 J15I (j^suL^aiaJI ^aAl ^j-a float ^aJj*ll5l A.jj^alA _J±VU 

J j t A^-s .a j-^a’m.5 Aiaaiillj oCaJj A^ii. Jl jj^ali*JI £_LAi. ^aJjxJ J Cilia, ^j^ali*i5 

.left jLJI Jl jl right <jijl Jl la] Jal CSS 


Lai tA_aJ_j*j j 


: Jti5l <Jliia5l caLLoJ c^aj_j*ii5lj Jli 














flost ^ 2 c> JlILa : 1 1 

j LaJ \ g J \ 1 (_£ill (_gjp*N<all < slJI J (__>^aill (jas (jj«aj]l ^aJ -^3 -lo^^ll] La£ 

l*'h ll (jSj ^aJ (jjaitlLall (_J£jluJI l-l£J (J<-l'lll < sUill j C^aJ_jJtll]l -}*J -ll-l^JI ^jJajjd 

>( _gji.l Aijjlaj ^jJaj-all li& ^k £daj 


(ja ^aJ^alill 4 w d\ 4. , a w c_)j^. tl^LoillL 4 ^ a, ^.\1 Jalio^.1 Ut^V J ^j^a^xILoLall olslj aa ^ jj '-T'jA* *&3jli 

• 4_i1a*JI dllj ^)j£j (Jl^. ^3 (jjall j 4 ^ a, -*-*11 

<£ 2 a. ^ajS J f l03t A li^ilaJI (jl (jVI ^Jj^al IfljLai LjjSi La£ j 

j c^ajiJa] I ^iiaj-a j ^aa-^iljlJ <1 4_l]lj]l ^j^aalisJI ^aj£j C jLaiJI ^1 jl (jJ-a-^l 

l-l£-l j (Jjja-VI 4-aj*-atl ^j-a j^3 (_£ I ^L^aiatJI (jlaa ) j jlll (jl j)S-aJ 

^-a clear a i » >— »L=^\ ^1 .la-HmL *-aSle ja-al ic. -3_J2kj £-i-a OSS ^jjj 

^la] left ^aaJI (_5^-j ^LLojI ^>jj clAjlj^j 4-ajlc. ^a^alic. L-4£j>j V jj^liaJI 


in 



(j-a 4-ajlc. Jj-alic. 


CSS CilLdxj 

** 


I^^JjLaS * j j j* yjj CSS AjjljjoijVI JaLaj^l (Jjljjt ^ Ax^-ajJI C-jlaj.l 3 t.lH AjL£ ^jj 


/* comment */ 


Media types £ljji 


-takjj-aH ^la yS-aj3 t IfriCa^tj ^>jSj La ^Ac. C- lij Aakjj-aH JSjCi j j^Jl-a CSS ^jjj 

LaLaj lall-a-a Ll^Cu j lg-a-La j l^jCajjjdujI -lie. liut-a Ll£Cu j 

.^l...(l^ 4 Ia) JjjjH ^ l$ 3 ajC. Cjfc 


J tCSS -IC-IjS Ar-^a^-a <_Jj3 La media i L-aj JLLi Qja ajSL (3^ La (_g.ja,r^.'i ^aJJ 

ojj£iall AJlaJI juc. Ax-j-a-^-a <_]£ (jjilaii ^jj ciija. CSS cc-ljB Ax. ^.a-s-a Jja ^>^.1 media 


: y JLlH Jllall caLLiI t @media Jl c&la ^ 


<html> 

<head> 

<style type="text/css"> 


Qmedia screen 

{ 


P{ 


text-align: justfy 
direction : rtl ; 


m 






color : white ; 


} 

body { 

background-color : green 

} 

} 

Qmedia print 

{ 

P 

{ 

text -align : j ustf y; 
direction : rtl ; 
color : white; } 

} 

</ style> 

</head> 


<body> 


5 ' J t ) ^ J i ) d C\ n) (3 J 1 I O > j 1 I 

ls _Ls CPJ-* i I j id) l_d 1 1 lj _Lc ooj- 5 * 1 I 

. 4_C I X lo I I / (J J j 1 I 

</p> 


</body> 


</html> 




^3 I .lie. JjjLaill <Jl!Li]l jAll 



@media Sjclill : tv Jiill 


Ar-lilaJI Jj 3 4jjL*-all Siali j-^ j 



@media Sjc W : £ A Jiili 


m 




:<uJti3l (5)media (jl (j£^j 



•» 

(_pa_)*JI aj^-^-l ^-j-a..> 

all 

4ilaUI ojg^JJJ 

aural 

(JjiaIII t _ s ^C- oAxuxaII aj£2>.'^\ 

braille 

(JjiaIII ^ic. o.la!i*-<JI oj^^.VI Clllxjlla 

embossed 


handheld 

cjUjUJI J£1 

print 

^blila (J-luI^)]|^ JalioiVI 

projection 

! L i i^l i i'\ 

screen 

. ^4_ul£]| 43jj-a]lS| CluU t_Sj^-a (_pa_)C. dlli ClAJulJu ^.Vs'inM (_g^l JSJ 

tty 

jliiiJlj 4 g mall aj^^\ JSJ 

tv 


@media SjcISJI : > > JjJaJI 


L-l.Ic- L CSS AojSlia — illl JjJaflj - lug-il .33 (jj£j Media Jl -3c.|j3 (jc. 1‘nO-v plgjjlj j 

I sjjtj ^ill J 4jJ^a»JI CSS I^_y ajL^ai. (^aj^ximl J_JIj]| dll^ix-saJI ^3 £jtiluj j i Igj^auL^aa. 

-lie. Ixjjjjj latSkj-a (jjfLJ <j.liljd]) CSS dll^.’l-s aj (_paj*. j (jl j _ gjli j)VI Usl cCSS3 ^jojLj 

,4_^.LaJI 


CSS JJj 


Jllail 

Jli* 


A 4 j-oIj]| dlli <_]£ 

.Mukhtar 

.class 

"class="Mukhtar 



<ii^alj]| dlli (_]£ 

#name 

#id 

"id="name 




iro 


T 








J£ 

* 

* 

J£ 

P 

tag 

^JUJ^ll ^) Aeolic- 

a,p 

tag, tag 

aJj2kj-all ^ajo^JI ^ji-salic. J£ 

<div> Jib 

div 3 

tag tag 

6.}j2ajJI ^joj^II jj^aLic. J£ 

Jallia J^jjij <diV> Jib 

div>3 

tag>tag 

e.}j2aj-a]| <p> ^ajo^JI ^Jj^alic. JS 

<diV> j-^i'if- IJallia 

div+p 

tag+tag 

src Aijutaljll (_g_ji: ^)j^ali*JI J£ 

[src] 

[attribute] 

SrC Ajj^al Jl ^j^aliadl J£ 

imsge.jpg Aa^l l$J] 

[srcHmage.jpg] 

[attribute=v] 

Ajj^al J£ 

V AajS lg-ill b‘nn.a tSTgSt 

blank 

[t3rget~=_bl3nk] 

[attribute~=v] 

j I^jj Aaja IgJI I.Vnua target 

http:// 

[href|=http ://] 

[attribute|=v] 

Ig-llc. jiill ^aJJ JajJJI JS 

3:link 

: link 

Ig-llc. ^aJ t _ 5 iS\ -LajJJI J£ 

3:visited 

:visited 

UU JUJI i^JJI 

3:3ctive 

: active 

ijj 1 ojliJI Ailc. j-aj -lajUl 

3:hover 

: hover 

UU. AlUill Jli^VI ^)j^aljc. JS 

inputrfocus 

:focus 

<P> j^-l.’lC- JS y-a t_S^a-a Jjl 

p:fi rst— letter 

:first- letter 

<P> j^a’ic- JS jiajoj Jjl 

p:first— line 

:first-line 





JjV' oV ' uj& <P> 

1 iVI OJ-s-l'\x\ 

p:first— child 

:fi rst— child 

<P> Jj^ajc. <_]£ <Jia (_gjW 

p: before 

: before 

<P> jjL^gjc. (_gj'W <a ^ lj.il 

p rafter 

rafter 

<aj 3 l-lij <p> J£ 

en ^LuaJL lang ajL-sIj 

prlang(en) 

rlang(language) 


CSS a\U3*A : 1 r JjJaJI 


\r\ 





CSS 3 


JjLjjl (jjjgtaj A_^.L^AI Clj^Aa (Web 2*0 Al j^,gJa £-a 1 , , ^-i-v \ ^g.La jjAaj £-a 

^l.l?>.!ml ^ Aaj^LM ^1 A^.liAI (jj^ £fll_j<a ^ ^xfaL^aj A_iA nn'lVI Aa Laj^M 

<-_Sj^)*-ail j AAjLljaijV I AaLaj^l JjLjjl (j-® -^-P^AI I jjgJa ^1 ^3-i La IAa j ^OAi^alAI 0 -aj^)J 

.CSS3 j 

* 

Jc. ^AAaj^al J A-l-llIi'A! CSS aAlA^AI ^ ajl > H j Clll-iA^-all ^j-a Ai-j-a^-a CSS3 ' Q-j-Ja'.l 

Cl)l.i^j3l ^»aI <_J*A J t Module ^jojIj dll.H^-a]| jl aAA (j-a Ac-j-a^-a <_]£ 4_l^uij 

I^A Ajliio-all 

/vUwH l" A vw <M Sa^j * 

'A Aj w\l CllLlil^AI j AjAaAl aAakj • 
(jj.I'lj^aH ^Lj-aj (jj i n Vi oA^j • 
oAjAiAl Cll|jJj-a oA^j • 

(jjAxJI ClAA VlmAlgAl CjLCjVAl oA^j • 
aL*jI AALLAI ciAa AjjojJu^JI cIjLLjjVAI oa^j • 

ciil£j^JI oa^j • 
a-laC-LM iiAAxILa dil^L^all oA^j • 
oVi.iiAI 4 j\L oA^j • 

LjLiajJLLuta]) 


^_j-a j.nL .,1 £jojjI j AfnAaAl CllljAa^}x!lui<s t-jlc.1 (_j-a A-a^C-A^s CSS 3 A Adj.a\Ilj 

.HTML5 A CllLAajJtlui-aJI CIiIa ^»C.A 


\r\ 




CSS3 Borders 


j (Round Comer Borders) j±. UjjJI cjli jjiaJI *Ujj CSS3 gjz 

duialiml LulUa (Photoshop (JSLa) (j-a ^alAaH mV (jjj J 

<-ajs ^UuojU j border-radius 4-u-aliJI ^a ^Lu^aLi. ^jc. a .all s^a 

CjlL^U AjjIjS ^JajLaJI o^jWI *— A>-aj (jc. a.Vnuoll A.a , tall ^>jxj c^Liill (_£.A^.Ij 

: JUI JllcJI 

< ! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http : / /www . w3 . org/TR/html4 /loose . dtd"> 

<html> 

<head> 

<style type="text/css"> 
div 
{ 

border:2px solid talalal; 
padding: lOpx 40px; 
background : tdddddd; 
width : 300px; 

border-radius : 25px; 

-moz -border- radius : 2 5px; /* Firefox 3.6 and earlier */ 

} 

</ style> 

</head> 

<body> 


\r\ 




<div>The border-radius property allows you to add rounded 
corners to elements . </div> 

</body> 

</html> 





border-radius 2±*ala. : i ^ Jiill 


-moz-border-radius ja, ^ ' o' Firefox 


y£-a-o ^jc. 





jlL^U 


: _jUa^ I £. Uijl ^aJJ j 


.ojjju-a]! : repeated • 


.ajji-aJI OjOalj : stretch • 


yilajjiaJI (jjj (J^aJI ^jdajJ J£Olll J 


1 i . 


CSS3 (ji CjljUaVI : 0 * Jiuiil 


JJJ-aj LJoj j ^aJJ 






jl repeat jjiaJI ^ < border-image-source J-aUJI Jl ijj^l jL^ 

Jl i^AAL jlLVI o^jp jUui] ^ iborder-image-repeat J^,UJI Jl stretch 
border- jjii^UJI Jl J jliJ j t border-image-width J^UJI 

eii^ jl ajIJi ji^ <_JI ijj^l ^ border-image-outset j image-slice 

. jlLVI 

4 4 ^ aIjLJI ^uajl ■ ^' 4 \t ^ill j border-image ~c ■ a ^ m 4 > . .1, -4 ’i a v -Ci , .i ^j^-Aj * 4 u,j^. u 

border-image:source slice width outside repeat; 

; jUa^l LLLa ClulajC. ^jll ajj > 4~ill ^Jc. (_^i]| ^Jllll Jl^^ill ^&LuljI 

< ! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http : / /www . w3 . org/TR/html4 /loose . dtd"> 

<html> 

<head> 

<style type="text/css"> 
div 
{ 

border-width : 15px; 
width : 250px; 
padding: lOpx 20px; 

-webkit-border-image :url (border. png) 30 30 stretch; 

} 

</ style> 

</head> 

<body> 

<div> Here, the image is stretched to fill the area.</div> 

1 i\ 






</body> 

</html> 


^3 J-Xll j 



j»j_£ (ji>j«iuw (ji jUaVI : * ' J&ill 

Lja^cLaui j ca^x-l oj^£aa]1 l ^-.-k \i ^.LajujI (Jjs — moz— ajIjuII ~ >-N."n.n Fi refox *4 

-o- ^ .ikiuLj Opera j -webkit- SjjUll Chrome j Safari 

<-043 lg-lll AluU J box-shadow 4_u-aliJI Ls (_JJa £.l/ij| Ldajl CSS 3 ^-iL 

JliLa]l -lAlZiil c J]a]l ClAjjl.li.1 (jC. ^>JXJ ^aj3 j Jia]| (jj] jjc. 

< ! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http : / /www . w3 . org/TR/html4 /loose . dtd"> 

<html> 

<head> 

<style type="text/css"> 
div 
{ 

width : 300px; 
height : lOOpx; 
background-color : yellow; 

1 if 







-webki t-box- shadow : lOpx lOpx 5px #888888; 

} 

</ style> 

</head> 

<body> 

<div></div> 

</body> 

</html> 

^_uajJt."uj:-a ^3 J-Xll J 



pj jS q * a jXu La£ Jlail 4_wali. : o Y JLuJI 


(Jjs -webkit- ajjiUI Chrome j Safari 


CSS 3 Backgrounds LjUlkil 


LllUalaJU ^.SowJiJl ^^Jc. 4-U^I jjla^s S^c-li,.u\l (jjjja-ala. AiLdal CSS3 (_ji 

4-ialiJI ojjjjL-all AjdaHj ^<un’i j^ill J bSCkQrOUnd - SiZ6 tJjJaSl 

La jA j Sj)jj-ai] A.Ax*a)! I jlajVI (jc. I flli-yj A-lil-iiS, ajj > .oil a-llaC-L ^«ml La-a 

I^^LLaS A-U^alaJl sLa ^jj cCSS3 lJ^ bS-a-a (jfLj 


1 if 




background-size: 80px 60px; 

J] JAwJ u' ^ aj^aSl (>ajc. ^1 JjVl fSjll 

— moz— ajaUSIj 4 u - n. \ l ^uai Fi refox ^3 :a b ^ b 

^-a^ f.13^1 a=J aa=j ^pSl j background-origin a^UJI I a^UJI U 

tjjikiJ context-box ^1 ^a^I Ik b (jl (jS-aJ j A-ujLoiI ( ^Jc. A_iiliJI ^!ilS JjjAjj-aSI 

j _yaH U i^j| ^ic. A_iiliJI padding— box jl (_gjW ^U j a, w ^\ i <_ya!LuiASI ^ic. Agil^SI 

AW .aSl (JiWnna\l t _ s -ic- AjiLkJI J^-iilalS border - bOX jl l*-a A_iliJASI A-^Jj^l J aSlj A, W .aSl 
. AjSiSAiSI i)sl1uia] 1 (jjj ^jdajj ^SjSI (J£jAJI j AjAs-SIj j A-ilkl-lSI A^.I^VIj J 



CSS3 Aail^J) Ao^sl^j A_u-iuil_i £ Jjaj : ©T' jLjJI 


-webkit- ajaUII b w,.„ i ^ Chrome j Safari y 


jj£1 AiLdalj ^-LojoiSI CSS3 ^ A-iiS.-k.Sl A_u^aUk (Ailjjjdal ^iSI Cllliija^AiSI (j^s 

IjJSkuSLj Ali-aliSlj (_gjk.V 1 J A-iilk <_]£ (jjj (_Jj-aaSI ^) 4 C- iAISa j jjL-a.'m.SI (_>oiiS AgiS-kfiS dj 3 j]l 


background-image : url (backl .gif) , url (back2 . png) ; 


1 i £ 






CSS 3 dJbJaJI ^fljtuaib 


J 


L^jL^axJ ^_yaytji CSS3 ^ ^ua_^nlll (Jgjjoml ^j-a A^-j-a^-a AiLial ^aJ 


QuA\ 

<t *< a aU 

A,u^at-\l 

•• 

.ij-la. ^j9jA 1I A-a^lc. £iiaj -i-laj 

jl first jl none 

hanging-punctuation 

<P> Jj^'ulU 

allow- J last 
force- jl end 

end 


<_J£ AjU ^j-a Aj^IjjsVI A-a!ilc. 

J\ end J start 

punctuation-trim 

<P> 

jl allow-end 

jl adjacent 

none 


yjSj La-ljc. olil^-all Jj jaaj Aijia .l^j 

inter- J auto 

text-justify 

J A_ijLu^ text-align A_u^>UJI A^ 

inter- jl word 


Justify 

jl ideograph 

jl inter-cluster 

jl distribute 

trim J kashida 



JJ3U JjoiSJLj A-ajS 

text-outline 

L yajll 

A-aj3 j QjayiW ^jc. 

yC. ^±*j A_ij^l 

UJ^' 


(J_jJa ^ n si j La-lic. <LaC- ^»!ii La 

jl ellipsis jl clip 

text-overflow 

(j«a JjAal 

string 



1 i o 





^ ^>1 !•*> L 0 W ^ \ 


text-shadow 

i sliiill (jjaau Aiijla .llaj 

normal J none 
unrestricted J 
suppress J 

text- wrap 

A \ ^ ^ \ \ L ** j\ A ^ h nfl ' A *Q \~% ^ V \ 

J\ normal 

jl break-all 

hyphenate 

word-break 

~ \ l i^Qj ^ k ^ \ 1 1 ol ^ ^ Q -v ‘‘l \ 

a2^*s .all AijjUl ^Ac. plij CllLalSJI 

word-break <^UJI ^ 

jl normal 

word-break 

word-wrap 


CSS3 (ji (j/? : \ X Jj-i^JI 


:^a jl ojlA j_J Jt^.j ^l.Vi>.lml JllLaJI ^_yajx. j 

< ! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http : / /www . w3 . org/TR/html4 /loose . dtd"> 

<html> 

<head> 

<style type="text/css"> 
hi 
{ 

text-shadow: 5px 5px 5px #FF0000; 

} 

</ style> 

</head> 

<body> 






<hl>JJJ^_ll 0 aJUI</hl> 
</body> 

</html> 


CSS3 (jk JajJaiJI 


j AjtjUiJI ^l.Y't.'h.ul L_u_jJI Clll^Aj^a (_gjjl-i.a (■ —la. lj £ j-a (jl£ ^Lbuliult CSS ^3 

JJC. Ja^. (_^l ^ic. jj^ls (jSj (jl j 4^jj^a3l jljj (■ - ILoil^a. i_llc.l ^3 

^j-ajda iaa. (_gl ^llajuuil jjl£-aVlj ^ n.-il CSS3 £-a c^Sj-all ^y\j t-Jjjajla. JajJaa. ^3 3jaa^a 

src 4-jj^aLaJI ajLum iliui] j j £3j-all CllliLa QAj^a JaaJI (. aLa £jdaj 3*J 

r^-LlaS ^3^1uu j US SipaJI @font-face social 


.@font-face a-ic-lill sipa. 4 JjIc. ^ — Vjl 

» A « 

.^.iilaj (J£jujj font - family < :- u-alaJI HjLuj aAjUJI ^d ,Vn>n — LuIj 

CjlLa^xLuull ^stj ^C-Jj LaiiJ laiaS .GOt ^dl Cdl Ja^JaaJl IntGmGt ExplOGf (^j-a^xlxaAs I^Ja^aXa 

• Otf j . ttf t jjc.jill 

: JUI Jllall 3ALiiJ 

< ! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http : / /www . w3 . org/TR/html4 /loose . dtd"> 

<html> 

<head> 

<style type="text/css"> 

@font-face 

{ 

font- family: myFont; 







src : url ( ' Sansation_Light . ttf ' ) 

,url ( ' Sansation_Light . eot ' ) format ( "open type" ) ; /* IE */ 


div 


font- family : myFont ; 


</ style> 
</head> 
<body> 
<div> 
oaJ-J l 
</ div> 
</body> 
</html> 


1 Jo j kt > i (j I pi Joiddii) I (j-SwO ) 


2D Transformation cj|j 

C-llajouV l£ -1*JI AjjIjj A.lm.VlA (j-a CSS3 

^1 j scale jjj*j j rotate j translate 

.transform <^UJI 


Firefox j Jja -ms- p ^juu Internet Explorer 

/ji ^ n'i..’ > Safari j Chrome ^ja^aious j — o— p^aJLmj Opera j — moz— pAaJLmj 

-webkit- a!iU]I 


1 £ A 


£j|jj (JjiaJI J 







£jjl\ 

<1 ijxxil c!iLuIa^.VI ^1 Jib 

translate(x,y) 

n AiLuix X jj^-ail ^^Ic. Jill 

translateX(n) 

n AiLuix Y jji-aJI Jib 

translate(n) 

<1 jjjjxxil (jjlaJI ^Jl jj.-rfa.Mt.il Jlu jj*-1 

scale(x,y) 

n rfbajflil ^Jl X jjl^-» ~ia.il l*j j-uu 

scaleX(n) 

n 4.x. .19,11 ^1 Y jjLxaixil laj J-UU 

scaleY(n) 

a 4jjI)j jxrf=ii«JI Jjjlb ^jii 

rotate(a) 

Ya j Xa jjbjJit Jij i_a|piYI Jjjk $ 

skew(Xa,Ya) 

(X AjjjJI (js j X jj^-ail o_sJa_iYI Jjjk e-Jkj ^jii 

skewX(a) 

01 4-ijJil Jij Y jja.xil i—iJalYI Jjjk ^jii 

skewY(a) 


CSS3 ^ j&jJI ^Uj : ^ 


: JUI JliJI lAlki 

< ! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http : / /www . w3 . org/TR/html4 /loose . dtd"> 

<html> 

<head> 

<style type="text/css"> 
div 
{ 

-webkit- transform: skew (30deg , 20deg) ; 

width : lOOpx; 
height : 7 5px; 
background-color : red; 
border : lpx solid black; 






} 

</ style> 

</head> 

<body> 

<div>It is CSS3 Magic!</div> 
</body> 

</html> 





fjjZ (jib jxluu> Skew Jlla : a i JLuJI 

q c* 1)^-^ j degree J] deg 

rad c_a^Sn a! 






3D transformation jbuVI Ajj!>Ij 

j t-jjLoiVI ^j^aliatJI ^jic. AiJlii Ajjojaia ciJLijalj ^lii]| CSS3 

: Jlllll Jj-laJI l^jlaja-l £j|jli]| ^al .laJljgilj 




4J o^mll Clliil.la.YI ^j^aiarJI Jill 

translate3d(x,y,z) 

X j_^a-a]| ^Ac. n AsLuki y^j&l\ Jill 

translateX(n) 

Y jjja-all ^^Ac. n AALoks ^j^altAI Jail 

translateY(n) 

Z ^^Ac. n AiLuia jj^aixSl Jill 

translateZ(n) 

A] 0_)-a-aJI clauYI clxjl jli-l 

scale3d(x,y,z) 

n jIlLait ^1 X Cxj jlju 

scaleX(n) 

n jlciaJI Y Cxj ^)li-l 

scaleY(n) 

n jlci&JI Z Jbt-i jii_i 

scaleZ(n) 

AjjJj A4>UI jjLa-all ^Ic. jj^siinJI jjjlii ^jii 

a Ujllia 

rotate3d(x,y,z,a) 

(X AjjJj X j^a-aJI ^Ic. jjjlii ^jSj 

rotateX(a) 

Ct AjjJj Y ^ y^xl) jjjCoj fjL 

rotateY(a) 

a AjjJj Z Jt. j^m1\ jjjjIi ^jL 

rotateZ(a) 

A-ijjJI jjAa la C.la_) 

perspective(n) 


CSS 3 JbuV' Ajj^j A urt.r ^ W uj^Lj^oil : \ o JjiaJI 


Transition jiittVI 

jlilli]| li& i Sjx-i .Vnmoll jj^aljc. ^ic. jlilli «• Lilli V J 4.1 la^ AijjJa CSS3 ^)3jJ 

CSS o.ic.15 (jjjJaij |aJJ Cilia, transition 4_ijy*alaJI yf. AA^a! ^jj J liJj^llaJI (JlaHiVI jajojll 

.ti^alla uii jg Snj La-a CCa^a y^j A-i L^aY i oCc.taJI y. <aila-a 

y o\ 







transition: property duration; 

jjjju j (3-“^ (jc- duration j jgjuim A-i^la. Jl property dia. 

transition: propertyl durationl, property2 duration2 , ... etc; 

: Jtill Jllall 

< ! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http : / /www . w3 . org/TR/html4 /loose . dtd"> 

<html> 

<head> 

<style type="text/css"> 

div 

{ 

width : lOOpx; 
height: lOOpx; 

background : red; 

-webkit- transition : width 2s, height 2s; 

} 

div: hover 

{ 

width : 200px; 
height : 2 OOpx; 


webkit-transform: rotate (180deg) ; 



</ style> 

</head> 

<body> 

<div>Hover over me to see the transition ef f ect ! </div> 
</body> 

</html> 



CSS3 4^1 ij*. 


^jC. Lax 4-^Aj-sa ^3 <j^aj^aa»^a Cbl£j^ (. Lijj CSS3 ^JJU 

pLLijl J (j-aaJa LfcjJC. J fl3Sh jl Lfij'^.'-'baH . Q if Jl jjj^a 

AjAaj ^)jc. jA La j @keyframe o-ic-lill 

£jdaj}| (j-a (JlijjVI (JjAlLj -lie. Ja.Slj j ttO £jdaj]| j frOITI ^1-ibLM £jdaj]| 

j».tu Uhaa-j Lax AxLaj ojjS <JLLi £xlaj]| jaxajxll ^IdLLM 

. j i \Lj animation A.u^aL^-H lAiiiL (j-aj j ^a^l .ilixl ^jj — Liilii 

: JUI Jllall 

< ! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http : / /www . w3 . org/TR/html4 /loose . dtd"> 

<html> 

lor 







<head> 

<style type="text/css"> 
div 
{ 

width : lOOpx; 
height : lOOpx; 
background : red; 

-webkit-animation:myAnimation 5s ; 

} 

@-webkit-key frames myAnimation 

{ 

from {background: red; } 
to {background : yellow; } 

} 

</ style> 

</head> 

<body> 

<div></div> 

</body> 

</html> 

plrjl j 4-ul.lill ^Ic. ^L<UC- V Ij e-USul j JjjLuJI JllLaJI 

^utj 4JUJI j <_JSlu ^jc. (jl i"u-s 






OSS pUiojl ^)JC- dlliaaj 4_la^J <_]£ ^3 <_J£iu ^u^-.u-^a's.'j 

* @keyframes o^c.li s^-j 


@-webkit-key frames myAnimation 

{ 

0% {background: red; } 

15% {backgroung : green; width : 150px; color : white; } 
50% {height : 350px; } 

100% {background : yellow; } 

} 


(jC. ^)JXJ j 100% J 4 jliJ <irO-a.i 0% (jl 

.4£^pJI pljjl Cllljla 



CSS3 fjk ajjaIaII dXo&Sfl 


l-llas <^ c ') Mu lti — Columns o-i.}*lLa a.laC.1 <_J£iu (Jljl^-a CSS3 ^-ajaj 

lyjjijjlaj 

a-laiC-VI -i-lC- Jliu.) qa lilli ^aJJ j I JJJU-a ^j^ajC. j dulj O-laC-l -i-lC. — JjVI 

j_j^3jc. J-Ut.'-lJ j c'oJLaC-VI (j-a -iJbtJI ^1 (_gj ‘l-s .all ^joiSJ COlUmn - count 4..U^alAll 

. ojalj jjju £-a S-laC-VI 

(_pLi. dlli |SJJ J : Jjjtl-a o.AaiC.1 .i-lC. j dulj — 4_ijUj]| 

ajiA ^ j ccolumn-gap aj^UJI J] (jji^ac. <aU^l j column-width l^UJl 


^ oo 






sjalj j IfrLa JSi Clulj ^yajC. ^^Ac. a-laC-VI Aafll^j AiijlaAl 

. ^_paja.''ujx.'l 

.qJJxIIaII O-IgC-SM HjLuj OJ^£.1a]I CjLjlldl ^tcij ~ !4 T . U 

AiyUlj o^Jl*J-a]| a-LaC-VI pLiil JliLall 

< ! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http : / /www . w3 . org/TR/html4 /loose . dtd"> 

<html> 

<head> 

<style type="text/css"> 

. newspaper 


-webkit-column-count : 3 ; 


</ style> 


</head> 


<body> 

<div class="newspaper"> 


this is a sample content this is a sample content this is 


sample content this is a 
this is a sample content 
sample content this is a 
this is a sample content 
sample content this is a 
this is a sample content 
sample content this is a 
this is a sample content 
sample content this is a 
this is a sample content 


sample content this is a sample content 
this is a sample content this is a 
sample content this is a sample content 
this is a sample content this is a 
sample content this is a sample content 
this is a sample content this is a 
sample content this is a sample content 
this is a sample content this is a 
sample content this is a sample content 
this is a sample content. 





</ div> 
</body> 
</html> 


(_paj»"nn.a ^3 (JjjLuiII JliLoJI 



Ofii'stPage.html 

<- C O file:///C:/Users/Mukhtar/Deslctop/firstPage& 


this is a sample 
this is a sample 
this is a sample 
this is a sample 
this is a sample 
this is a sample 
this is a sample 
this is a sample 
this is a sample 


content 

content 

content 

content 

content 

content 

content 

content 

content 


this is a sample content 
this is a sample content 
this is a sample content 
this is a sample content 
this is a sample content 
this is a sample content 
this is a sample content 
this is a sample content 
this is a sample content 


this is a 
this is a 
this is a 
this is a 
this is a 
this is a 
this is a 
this is a 
this is a 


sample 

sample 

sample 

sample 

sample 

sample 

sample 

sample 

sample 


content 

content 

content 

content 

content 

content 

content 

content 

content. 


. 3 SjjxIs Sxo&U jy' * pluijj : 00 


column - rul© A 1 > (jC. o-IaC-V I (jjj (jj-lla-a j j^-1-a.a dlli (jS-aJ 


column-rule: 4px dotted black; 


CSS3 User Interface 

C1lo 33 -}S3 ^ dm 0SS3 Lil 

^A'k'u.u^aW dll n 


1 oV 




11 ) 


•• 




4 _iii£ i Lijtl ^j^aju'nnal Alai 

.Vnm.aH (j-ajJa jj_^ajxAI ^_pajC- 

jl icon jl normal 

J\ button J\ window 

field jl menu 

appearance 

^jLI (J^ mj La jj^q'lC- Jxa. ^JJJ 

Jajj; jl inherit J auto 

ojjj— a! 

icon 

AaxjAaJ Lalic. p"' ' ■ ■' jj-il A-laii 

Aja_^] ^3 ^xg-uiL? 1 ^jlili-a ^Ac. ^A^Ajoia]I 

^jjli-aJI 

J\ inherit J auto 

jl ^j-alixAl Aa .1 a_ijjt-a 

^)Llal ^a-uil 

j nav-down 

j nav-left 

j nav-right 

nav-up 

CllUaxjAa AAc. lg_JI Alui^AI AAxAI \W ; 

^1 JUAjLU A-aj!>UI Tab ^lAia 

(jjj JliliV 1 (J ulL aj (j-il jl 

Tab ^lAia t _ s Ac- Aai-AaH -lie. 


nav-index 

^AaluuJ] ^j-ajjiAll ^j-a jjl£ILI LajS AAaj 
(_£jA J (J£. mj div Jj^aljc. Aa .1 ^.a.a. jjjxj 

J horizontal J\ none 

both jl vertical 

resize 


CSS 3 SjjlaJI A^^lj (j^aJl^ok : o ’ JLuJI 


CSS3 


(JjAiJ! ^3 l^jjajxj CSS3 (_ 5 ^ ii.li.laAI ClllA-la-atl (j-a Ai-jxa-a AsljAal ^aJ 


JIaaAI 

Jli* 


(jjiul-a Ajjj^s JJC. 4-ajls j^fjAC. (_]S 

p~ul 

tagl~tag2 

0^33 



^a-3 lAij ^^ill Aaj|j^>H jj^saljc. J£ 

a[href A ="https”] 

tag[attribute A =v] 

https A-ajflJL href l^AL-alj 








,xml (j-a djliLa 

a[href$=".xmr'] 

tag[attribute$=v] 

jJjJuj Jajljjll Jj^alic. (_J£ 

micro </ua3l (jjjUc- 

a[href*="micro"] 

tag[attribute*=v] 

Jj^ax. 11 (jj^J < 'P> (_JS 

ajj--a'i».\ 4jmu]U A£.jj qm JjVi jjaVI 

^Vi 

p:first-of-type 

:first-of-type 

(jj^J < 'P> j-L^n’lC- <_JS 

oji~si 'm.\ 4_Luiillj A£.jj qm (j^Vi 

^Vi 

p:last-of-type 

:last-of-type 

^j-taixSl (jj£Ll < 'P> Jj-aic. J£ 

aj.--a’ui,l 4 JjgulU Ac-jj ^j-a jjaVl 

^Vi 

p:only-of-type 

:only-of-type 

(jjVI < P > 

i 

p:only— child 

:only-child 

jjjVI (jj-^ < P > J j - a ^ c - <_£ 

i iVi ajj.^i'\x.\ 

p:nth-child(2) 

:nth-child(n) 

jjjVI < P > J^ajc- <_£ 

^j-a AjlJI a-Ai £-a i iVi a^jwVu.l 

JJ^SM (jjVI 

p:nth— last— child(2) 

:nth-last-child(n) 

jjaVI < P > Jj-ak- <_£ 

L_lVi a^ajjJ 

p:nth-of-type(2) 

:nth-of-type(n) 

(jjVI UJ-±! < P > y^s. J£ 

i iS/l ajj^Va.l ^y2^\ 

p:last— child 

:last-child 

.VnmoW j W 11 .\K ' 

:root 

:root 

A.XJ..\C. <P> ^Jj^aljc. (_J£ 

p: empty 

: empty 


1 o<\ 







(JLkaJI #news jx^\c. 

jiill JAC. 4_ill ^aJ 

(ui^ta <ji 

#news:target 

:target 

^)jL^aljc. (_J£ 

input:enabled 

:enabled 

AJia-all JJC. ^)j^aljc. (_]S 

inputrdisabled 

rdisabled 

qjlj-ii.aH JL^yi jj^aljc. <_]£ 

inputrchecked 

rchecked 

<P> ^jj^alic. )^c_ ^jj^aliaJI <_]£ 

:not(p) 

:not(selector) 

f li (_gUl jj-jalaJI qj^. 

::selection 

^selection 


CSS3 <_ji S-iuaJ! \ 


n. 




4_ajUJl 


o3c.jj 3 t_lll£ll jjfL: l3gj j CSS3 (jc- bjJ3a. 4jl$l t _ s -S] liLaaj 33 jj£j l3^j 
jljda ^3 43Loui]1 £jj i"a L>3 33 dul jj£l l-l£j J J *- -S^La (JSuuaJ CSS3 J HTML5 

^^cjl La£^ 4_illl]| a jialJl j 13 AAlflaJI ^3 j ? 3*J ILLa j I Jf-Luili 33 li& j tt_Lij]| 4^-ajj ^xlxj 

jas <^-ajJI dllil (_j3^.l ^1*1 ^3 Ajpll ajlajil ^jtl jQllSry jl J3V3 Script ^Lt2j jl 
jjlai' L_lfll jaj (jjjAall j-« da L>3 33 jjSlll ASP.NET jl PHP jLa jSjJail (. Sjia 

j jlfiJI (jlaflj “UlaC- ^k — ^l^j - jja£u3 AjsIJI % ) <3 Jl Lai c'Wob D6V6l0p6r l_Uj 
. A-allil 4ajll-a]| j ij.alj.a,a.'l aaljfl]| JJC. 4 n~lgl j JaflS (jxajjl jil ^^Jc. a-lijLM J Ada!*! LaC. 

j CSS3 j HTML5 < _ s d*J jc. a3i^. <lAs dllllac.1 ^k ^aLo> 3s IJa jjSL ji (_gdajl 

A.J-aa^. j dj| AjIcjj lilSjlLaS jVI Lai K-JLdajI j lilialj 33 jldsLM ^jlajC. ^ Ajjluil jjSL ji Ail I 
^Jlc. ^3 jj^.1 <J|jl La ^jjjl ajjl J ct—Ujl] jJjJalll ^Llc. ^k Aada-a j <j31a aJ^jj lil] jC-3Lui j 

^3jjj£JL?i l£3j^j ^Ic. jLaflij.Ail jl ^-jjisl j j t_jjj]| 

.4j1£jj j ill <-aaj j ,-vljIp pdJI j mokhtar_ss@hotmail.com 
















JlLuiSn 


L- alall Jaia. j o^Lall 0 xljjj ^3 HTML ajild Jjl 4jLi£ 

HTML ^ 1 . 1 'siLmlj 4 jjj£-o 4aajj^a ^3 


T £ align olila-all 43j-alj 4jljJal .lie. < 'P> ^ajj^oill ^_paje. 

TV (jjjliaJI ^jj^lic. jliia.1 ‘ 


T A <hr / ;> jA^aiajI 4-ijai: 4 ^ i ■ - ~i 

r * . ^^3 jfrlal V J J^i-axll (_paje. oisli ^^3 j-^aAL/ I qjIIIj ^.Ja'l C-jla.'Lt.ll.H 

VT ^ua^^aill (_3j*u'n jj^alic. jlilkl Aa^ij-a 


V £ 4..-s.4j^all i J 4 i ^il -n. \l i ajL 31 .aH ,jia»-l J oV JliLa 

V 2 LjljjH Juj ic- jliiiJ 4 -s q . ,^, 


J^j^all j^-a’u.l jliiA.1 4.3>.9j^a 


£ * Jajljjl] (_£jlia-a£ ^_^ajj^aill ^jC. V OJ ^l.lA'i-ml 

£ 1 4jjjj^a 4_IajjA. ^-L^a ^ic. Jlila 

£ T Jjlaliall ^ojj ^3 ^ 1 14'^ H Lllxi]l ^ j > >ijll ^.Ij.A.'l <_J£d 

£ <3 4 Ui.ni 4_ii yA Jje. 4-ajlil JLla 

£ <3 4.1a. Lm.) 4-jjjx 4-ajli If. JLla 

£ V &.V4»..a 4-ail£ ^jlc- (JLla 

£ ^_pajx!Lui^n ^3 dll*s U-n .a .all 4^ajL3 jAil I.i£a 

£ H Jj-laJI eLuoiV 4 < al»‘*nn.aN ^jjaijll ^IjAi (JfLui 

® 1 JaluU Jj-la. aLLil lc~- JllLa 

®T HTML ^3 (Jj.laJI ^LoiSV ^.'a.idajj ^ajajj 

00 ^LLa HTML Jj-ia. aLLiV cJliLa 


: 1 JLJJI 
: T JLill 
: r JLill 
: £ JLill 
: 0 JLill 
: 1 JLill 
: V JLill 
: A JLill 
: <\ JLill 
1 . JLill 
1 1 Jiill 
U JS-3S1I 
ir jiiii 
1 £ Jlill 
lo Jlill 

n jiiii 

IV Jlill 
1 A Jlill 
1 <\ Jlill 
T. Jlill 
T 1 Jlill 





<2 v .colspan j rowspan (jiiijbaaljSI S~> i > >n jjc. (Jja^. pLijl (> _ s ^c- JlSix • Y Y <_]£AiSI 


1 S jalaiU ^ AjjOA pLaijl ^ic- JUla : Y V (_) 5 Lja\l 

IT JJkj .Var-i jj^oj plAjl : Y £ 0 K .ill 

l £ radio j checkbox ^hViJ ^ Jlla : Y <= J£PSI 

\o select j-L-n’lC. ^ 1 . 1 -^Timl (> _ s ic- (JlSLa • ^ *t (JSxuSI 

iv textarea j^ulII a^'uA J&. Jlia : yv J£PSl 

“U fieldSet ^IalU Jlla : YA 


V * ^.ijxC- (JSj.a .1 dlljUsVI ^ 1 . 1 'ikUjil I Y ^ .'nil 

VS Ja\ CJ^ILVI : r . J£PSI 


i £ ^bjj£ (Jabja. (_pa_)*.'lJ.Jija ^3 jAjj LaS -ll-liJI jJ-lliSI (_pajC. 


:VS Jlill 


A<2 


^bjj£ (Jib ji. (_p 3 ja.'~Uji,a ^3 jAaj La£ -ll-l^SI Clljjb-aaSI (_pajC. 


vy j^psi 


AA ^»jj£ (_paj*Jjx-a ^3 jAjj LaS oilAiJI (JIAaVI Jj^alic. '. W (J^juiSt 

S * £ (_^ajjb^ai31 j ^ Sxj\ ^l^ibJjail ! V £ .''Al 

) *1 JajJra.A.H (jasul > .-vs ^lAiJiuil I V O (J£>j.lll 

ojljj Aaj j CllSlSiSI .lajljJI LS^" A-laiJ .lajljjSI j^Jix jl.n-s.1 <-Sb..9^a jAi S Ia£a I VI (JfLuilt 


\ * A ^ISII 

S S S AjiikSI ^uajl-ba-i-s jLui.1 Ajbjj^a j-li: I^Sa I Y"V (_J£AuSI 


S S V L-lJjSI (_paja.Aj.aX ^jljfiSI JjJ-O-a (Ja 3 jl.baa.-S jLuib' A-lSflaai jAjj IaSA I V A j_J£aalSI 

S SI Jjjl W 11 jgJrax (jjjbji.'n.\ OSS b_, 9 .;JojJ I V H (_J£alSI 

S S A OSS ^2 jjjaaliaJI A.a.P-a JX (jaajLaa-s. ^l-liPjail ( _ S ^C- (JllLa I £ » (JSaaSI 

S Y . z-index a^USI A^'uA J&. Jlla : £ s J^l 

S Y S jjafib-H (jjIra-aSI dlli jjjasljaiS jjj-alill aJsjjxI (jasjC. ( _ S ^C- JlSix : £ Y (_J£alSI 

S Y V box model (_jj.iijba 3 .SI ^ij-aj : £ V (JSxuSI 


i -n 




) Y1 ^gic. 

\ Y A margin <=kjUiJI 4-ii-ala. ^gic. Jliia • £ 0 (JfLuiSi 

) V ^ f!03t ^jjxUll 4-jjL^ala. ^ic. JllLa '. £ 1 (_J£aa]| 

^ r£ @media s^-lSJI : £v 

^ Tt @media social A^-u«\ : £A 

) £ * ^jjr* ^gi border-radius 4_uaali. ^loaHml : £H <_]£^dl 

U . CSS3 J> c^lLVI : 0 * L&^l 

l £ Y ^j^ayUxAA ^3 jUaVI ’ 2 l jJfLall 

) £ V f“JL)^ ^_pajJt'u.u.a ^3 jOjj La£ JIall Ajj-aLk : <2 Y (JSjjjl 

l £ £ CSS3 ^g3 A-lilaJI Ajj^alaJ <JjaulU ^Ojaj : 2 V (JSjjaJl 

) <2 * t_p3J*''lJ..a-a ^gi SkeW ^gAc ° £ (J^juJI 

l 2 V OOaJI ft.V W ^ SOOxIla S-lacLj (_gjp-s a plAjl : 2 0 ( _]£Aall 

) 2A CSS3 ,_g-3 SOjAaJI ^AaAuiaSl ^jaajL^aA l 2 1 (JfLuall 


1 IV 







Y <2 HTML ^j-jaljc. i. _ '\r. I (jjj dllaj^alj]| (Jj.ia. I } (Jj.laJI 

YT HTML ^ 4-L-aLiJI < ajl-si.aH y ><» j : Y 

1 * <input> type jI3 ^alL^al! ^jill • T 

VV HTML ^ojj Jjb : £ Jj^aJl 

At <video> j . ii ° JjAaJl 

A "i <video> j . .-v--* \1 diUj^al j : 1 

AV HTML 5 ,yS ~o.li.laJI Cla-lVI ^Jjjjaljc. : v CjiaJI 

H Y <canvas> _^jg,~»JI (jJl£ jjjJa ^ cJjiaJI 

“t £ HTML 5 yi oiiiaJI JJi : “t J jiaJI 

1YY CSS ^ cj!i=Jj : ^ . Jji=JI 

^ r<= @media oi&UH ^ : n jjiJl 

^ rv CSS Cjb^ : ^ Y Jji=JI 
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□ Programming Languages: 


. Desktop: C#, VB.NET, VB6, Java. 


. Web: 


Server-Side: ASP.NET classic and ASP.NET MVC, 
PHP Classic & PHP MVC using Codelginiter 
framework., JSP. 





o Client-Side: HTML 5, CSS 3, java script & jQuery. 

o Technologies: XML, JSON. 

. Smart phones: Android programming. 

□ Database: SQL Server, MySQL, MS-Access. 

□ Misc.: MS-Word, MS-PowerPoint, Photoshop, Maintenance 
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